svg css圆角不起作用

Question

我有一个SVG文件，我正在应用CSS。大多数规则似乎都有效，但是当我应用关于拐角圆角的规则时（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>

知道我哪里错了吗？

Answer 1

rx和ry是常规属性而不是表示属性。只有表单属性可以由CSS设置样式。列出了各种常规/表示属性here

另请参阅SVG 1.1规范中的Presentation Attribute和Property。

即将发布的SVG 2规范提出大多数表示属性都成为CSS属性。到目前为止，只有Chome已经实施了规范草案的这一部分。我想其他的UAs会在适当的时候实现这一点。

Answer 2

脚本编写不能简单，为什么不使用它：

 yourRect.setAttributeNS(null, "rx", "5");
 yourRect.setAttributeNS(null, "ry", "5");