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>

我错在哪里了，有任何想法吗？

- pluke

Answer 1

rx 和 ry 是正则属性而非展示属性。只有展示属性能够由 CSS 进行样式设置。各种正则/展示属性可在此链接中查看。

参见来自 SVG 1.1 规范的展示属性和属性。

即将发布的 SVG 2 规范建议大多数展示属性转变为 CSS 属性。目前，Chrome 和 Firefox 已经实现了草案规范的这一部分。我想其他 UA 将会在适当的时候实施该规范。

- Robert Longson

---

有没有办法像CSS中的border-radius: 5px;那样调整SVG的四舍五入？解释一下，谢谢。 - pluke

这是显而易见的答案：<rect height="170" width="70" rx="5" ry="5" id="rect7" /> - Robert Longson

抱歉，我应该在问题上表述更清晰。请问是否有任何方式可以应用样式表或替代方法来实现与CSS3中border-radius: 5px;相同的效果？ 我没有动态创建SVG，并且它们被用于具有不同通用样式的不同网站。 除了'内联'它或编写JavaScript进行动态更改之外，是否唯一的方法？ 再次感谢您的帮助。 - pluke

感谢更新，Robert。我刚刚看了这个视频：https://www.youtube.com/watch?v=UL2-ZAyvXOM，看起来非常令人兴奋。 - pluke

Answer 2

脚本编程再简单不过了，为什么不使用它呢：

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

- Alex

---

为什么在使用HTML5元素时，我们必须使用setAttributeNS而不是setAttribute？ - Chris P

如果我只想更新顶部的圆角半径，比如 border-top-left-radius:5px;border-top-right-radius:5px;，那么该怎么做呢？使用 rx 或 ry 是无法实现这一点的。你有什么想法吗？ - santoshe61