svg css圆角不起作用答案

【问题标题】：svg css rounded corner not workingsvg css圆角不起作用
【发布时间】：2016-11-28 11:34:22
【问题描述】：

我有一个要应用 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>

知道我哪里出错了吗？

【问题讨论】：

标签： css html svg rounded-corners

【解决方案1】：

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

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

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

【讨论】：

这就解释了，谢谢。有什么方法可以调整 svg 的四舍五入，就像你可以在 css 中使用border-radius: 5px;
这是显而易见的答案：
对不起，我应该更清楚这个问题，有没有什么方法可以应用样式表或替代方案来实现相同的效果，因为 CSS3 现在允许通过border-radius: 5px;？我没有动态创建 SVG，它们被用于具有不同一般风格的不同网站。是“内联”它或编写javascript动态更改它的唯一方法吗？再次感谢您的帮助
感谢罗伯特的更新，我刚刚看了这个：youtube.com/watch?v=UL2-ZAyvXOM，这一切看起来都非常令人兴奋

【解决方案2】：

脚本再简单不过了，何不使用它：

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

【讨论】：

为什么对于html5元素我们必须使用setAttributeNS 而不是setAttribute
但是如果我只想更新顶角半径，比如border-top-left-radius:5px;border-top-right-radius:5px;，这不能用rx 或ry 来实现。你知道如何实现它吗？