The ry
attribute defines a radius on the y-axis.
Two elements are using this attribute: <ellipse>
, and <rect>
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg>
For <ellipse>
, ry
defines the y-radius of the shape. With a value lower or equal to zero the ellipse won't be drawn at all.
Value |
<length> | <percentage> | auto
|
---|---|
Default value | auto |
Animatable | Yes |
Note: Starting with SVG2, ry
is a Geometry Property meaning this attribute can also be used as a CSS property for ellipses.
For <rect>
, ry
defines the y-axis radius of the ellipse used to round off the corners of the rectangle.
The way the value of the ry
attribute is interpreted depend on both the rx
attribute and the width of the rectangle:
ry
but not for rx
(or the opposite), then the browser will consider the missing value equal to the defined one.ry
nor rx
has a properly specified value, then the browser will draw a rectangle with square corners.ry
is greater than half of the width of the rectangle, then the browser will consider the value for ry
as half of the width of the rectangle.Value |
<length> | <percentage> | auto
|
---|---|
Default value | auto |
Animatable | Yes |
Note: Starting with SVG2, ry
is a Geometry Property meaning this attribute can also be used as a CSS property for rects.
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'ry' in that specification. | Candidate Recommendation | Definition as a geometry property |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'ry' in that specification. | Recommendation | Initial definition for <ellipse>
|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'ry' in that specification. | Recommendation | Initial definition for <rect>
|
© 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/ry