cx

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

cx attribute define the x-axis coordinate of a center point.

You can use this attribute with the following SVG elements:

范例

html,body,svg { height:100% }

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <stop offset="0"    stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <circle cx="50" cy="50" r="45"/>
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>

circle

For <circle> , cx defines the x-axis coordinate of the center of the shape.

值	`<length-percentage>`
默认值	`0`
Animatable	Yes

注意： Starting with SVG2 cx ，是 Geometry Property , meaning this attribute can also be used as CSS property for circles.

ellipse

For <ellipse> , cx defines the x-axis coordinate of the center of the shape.

值	`<length-percentage>`
默认值	`0`
Animatable	Yes

注意： Starting with SVG2 cx ，是 Geometry Property , meaning this attribute can also be used as CSS property for ellipses.

radialGradient

For <radialGradient> , cx defines the x-axis coordinate of the end circle for the radial gradient.

值	`<length>`
默认值	`50%`
Animatable	Yes

范例

html,body,svg { height:100% }

<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="0" id="myGradient000">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
    <radialGradient cx="50%" id="myGradient050">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
    <radialGradient cx="100%" id="myGradient100">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>
  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
</svg>

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'cx' in that specification.	候选推荐	Definition as a geometry property
Scalable Vector Graphics (SVG) 2 The definition of 'cx' in that specification.	候选推荐	Definition for SVG2 paint servers.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'cx' in that specification.	推荐	Initial definition for `<radialGradient>`
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'cx' in that specification.	推荐	Initial definition for `<ellipse>`
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'cx' in that specification.	推荐	Initial definition for `<circle>`

另请参阅

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者