osbo.com | SVG | Attributes | cx

The cx SVG attribute specifies the x-coordinate of the center of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> circle { cy: 50; r: 50; } circle:nth-of-type(2) { fill: red; } </style> <circle cx="50"/> <circle cx="50%"/> </svg>

cy

pathLength

r

World Wide Web Consortium (W3C)

The cx SVG attribute specifies the x-coordinate of the center of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> ellipse { cy: 50; rx: 100; ry: 50; } ellipse:nth-of-type(2) { fill: red; } </style> <ellipse cx="100"/> <ellipse cx="50%"/> </svg>

cy

pathLength

rx

ry

World Wide Web Consortium (W3C)

The cx SVG attribute specifies the x-coordinate for the end circle of the radial gradient.

<length>

50%

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient cx="100%" id="myid"> <stop/> <stop offset="50%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="50%" cy="50%" fill="url(#myid)" r="50vh"/> </svg>

cy

fr

fx

fy

gradientTransform

gradientUnits

href

r

spreadMethod

World Wide Web Consortium (W3C)