ry

1. SVG 元素

   1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
   2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
   3. D
      1. <defs>
      2. <desc>
   4. E
      1. <ellipse>
   5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
   6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
   7. H
      1. <hkern>
   8. I
      1. <image>
   9. J-L
      1. <line>
      2. <linearGradient>
   10. M
       1. <marker>
       2. <mask>
       3. <metadata>
       4. <missing-glyph>
       5. <mpath>
   11. N-P
       1. <path>
       2. <pattern>
       3. <polygon>
       4. <polyline>
   12. Q-R
       1. <radialGradient>
       2. <rect>
   13. S
       1. <script>
       2. <set>
       3. <stop>
       4. <style>
       5. <svg>
       6. <switch>
       7. <symbol>
   14. T
       1. <text>
       2. <textPath>
       3. <title>
       4. <tref>
       5. <tspan>
   15. U
       1. <use>
   16. V-Z
       1. <view>
       2. <vkern>

ry attribute defines a radius on the y-axis.

You can use this attribute with the following SVG elements:

• <ellipse>
• <rect>

范例

html,body,svg { height:100% }

								

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

								

ellipse

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.

注意： Starting with SVG2, ry 是 Geometry Property meaning this attribute can also be used as a CSS property for ellipses.

rect

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:

• If a properly specified value is provided for 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.

注意： Starting with SVG2, ry 是 Geometry Property meaning this attribute can also be used as a CSS property for rects.

规范

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者