Html svg css圆角不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8687693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
svg css rounded corner not working
提问by pluke
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:
我有一个要应用 CSS 的 SVG 文件。大多数规则似乎都有效，但是当我应用有关圆角 (rx:5; ry:5) 的规则时，它不起作用。“内联”样式规则有效，但我对嵌入式和外部样式表不走运：
<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?
知道我哪里出错了吗？
回答by Robert Longson
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
rx 和 ry 是常规属性而不是表示属性。CSS 只能设置表示属性的样式。此处列出了各种常规/演示属性
See also Presentation Attributeand Propertyfrom the SVG 1.1 specification.
另请参阅SVG 1.1 规范中的Presentation Attribute和Property。
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.
即将到来的 SVG 2 规范建议大多数表示属性成为 CSS 属性。到目前为止，Chrome 和 Firefox 已经实现了规范草案的这一部分。我想其他 UA 将在适当的时候实施这一点。
回答by Alex
Scripting can't be simpler, why not to use it:
脚本再简单不过了，为什么不使用它：
yourRect.setAttributeNS(null, "rx", "5");
yourRect.setAttributeNS(null, "ry", "5");
