cy

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

You can use this attribute with the following SVG elements:

Note: As a geometry property, cy can also be used as CSS property for <circle> and <ellipse>.

Example

html
<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: The y-axis coordinate of the center of the <circle> can also be defined with the cy geometry property. If set in CSS, the cy property value overrides the cy attribute value.

ellipse

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

Value <length-percentage>
Default value 0
Animatable Yes

Note: The y-axis coordinate of the center of the <ellipse> can also be defined with the cy geometry property. If set in CSS, the cy property value overrides the cy attribute value.

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

html
<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
Scalable Vector Graphics (SVG) 2
# RadialGradientElementCYAttribute

Browser compatibility

svg.elements.circle.cy

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

svg.elements.ellipse.cy

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

svg.elements.radialGradient.cy

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also