cy

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

You can use this attribute with the following SVG elements:

Example

<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>`

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy