Menu
I have an SVG file that I am applying CSS to. Most rules seem to work, but when I apply rules about the rounding of corners (rx:5; ry:5) it has no effect. 'Inline' style rules work, but I'm having no luck with embedded and external style sheets:
<svg ...> <defs> <style type="text/css" > <![CDATA[ rect{ rx:5; ry:5; } ]]> </style> </defs> <rect height="170" width="70" id="rect7" x="0" y="0" /> </svg> Any idea where I am going wrong?
468
If your stroke-width is > 0 (unlike the OP's svg above): To round the "lines" of the corners of a <path> , then simply use css: stroke-linejoin:round; . . . to do to the same to line ends, then also use stroke-linecap:round; . Documentation: stroke-linejoin and stroke-linecap .
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
<rect> The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
rx and ry are regular attributes rather than presentation attributes. Only presentation attributes can be styled by CSS. The various regular/presentation attributes are listed here
See also Presentation Attribute and Property from the SVG 1.1 specification.
The upcoming SVG 2 specification proposes that most presentation attributes become CSS properties. So far Chrome and Firefox have implemented this part of the draft specification. I imagine other UAs will implement this in due course.
101
Scripting can't be simpler, why not to use it:
yourRect.setAttributeNS(null, "rx", "5"); yourRect.setAttributeNS(null, "ry", "5"); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
