files/zh-cn/web/svg/attribute/fx/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

---
title: fx
slug: Web/SVG/Attribute/fx
tags:
  - SVG
  - SVG属性
  - SVG径向渐变
  - SVG渐变
  - SVG渐变焦点
translation_of: Web/SVG/Attribute/fx
---
<p>«  <a href="/zh-CN/docs/web/SVG/Attribute">SVG属性参考主页</a></p>

<p>对于 {{ SVGElement("radialGradient") }} 元素，此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。</p>

<h2 id="用法">用法</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">类别</th>
   <td>无</td>
  </tr>
  <tr>
   <th scope="row">值</th>
   <td><a href="https://developer.mozilla.org/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></td>
  </tr>
  <tr>
   <th scope="row">可变性</th>
   <td>非</td>
  </tr>
  <tr>
   <th scope="row">规范文档           </th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td>
  </tr>
 </tbody>
</table>

<h2 id="示例">示例</h2>

<pre class="brush: html  language-html"><code class="language-html"><span class="prolog token">&lt;?xml version="1.0" standalone="no"?&gt;</span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span>
  <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>defs</span><span class="punctuation token">&gt;</span></span>
      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>radialGradient</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Gradient<span class="punctuation token">"</span></span>
            <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.5<span class="punctuation token">"</span></span> <span class="attr-name token">fx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span> <span class="attr-name token">fy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0.25<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>stop</span> <span class="attr-name token">offset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100%<span class="punctuation token">"</span></span> <span class="attr-name token">stop-color</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>radialGradient</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>defs</span><span class="punctuation token">&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">rx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">ry</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span>
        <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>url(#Gradient)<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>35<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>38<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(fx,fy)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>text</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>text</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>63<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sans-serif<span class="punctuation token">"</span></span> <span class="attr-name token">font-size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10pt<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(cx,cy)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>text</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>

<h2 id="元素">元素</h2>

<p>下列元素可以使用 <code>fx</code> 属性：</p>

<ul>
 <li>{{ SVGElement("radialGradient") }}</li>
</ul>

<p>
 <audio class="hidden"> </audio>
</p>