css - svg css 圆 Angular 不工作

Question

我有一个要应用 CSS 的 SVG 文件。大多数规则似乎都有效，但是当我应用有关圆 Angular 的规则 (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

另见 Presentation Attribute和 Property来自 SVG 1.1 规范。

即将推出的 SVG 2 规范建议将大多数表示属性变为 CSS 属性。到目前为止，Chrome 和 Firefox 已经实现了规范草案的这一部分。我想其他 UA 会在适当的时候实现这一点。