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设置样式.此处列出了各种常规/表示属性

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

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

Answer 2

脚本编写不能简单,为什么不使用它:

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