W3cubDocs

/SVG

cy

The cy attribute define the y-axis coordinate of a center point.

Three elements are using this attribute: <circle>, <ellipse>, and <radialGradient>

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0"    stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle  cy="50"  cx="50" r="45"/>
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>

circle

For <circle>, cy defines the y-axis coordinate of the center of the shape.

Value <length> | <percentage>
Default value 0
Animatable Yes

Note: Starting with SVG2, cy is a Geometry Property meaning this attribute can also be used as a CSS property for circles.

ellipse

For <ellipse>, cy defines the y-axis coordinate of the center of the shape.

Value <length> | <percentage>
Default value 0
Animatable Yes

Note: Starting with SVG2, cy is a Geometry Property meaning this attribute can also be used as a CSS property for ellipses.

radialGradient

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

Value <length>
Default value 50%
Animatable Yes

Example

<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%"   stop-color="gold" />
      <stop offset="50%"  stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="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>

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'cy' in that specification.		 Candidate Recommendation Definition as a geometry property
Scalable Vector Graphics (SVG) 2
The definition of 'cy' in that specification.		 Candidate Recommendation Definition for SVG2 paint servers.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'cy' in that specification.		 Recommendation Initial definition for <radialGradient>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'cy' in that specification.		 Recommendation Initial definition for <ellipse>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'cy' in that specification.		 Recommendation Initial definition for <circle>

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy