svg css圆角不工作

我有一个SVG文件，我正在使用CSS。大多数规则似乎都有效，但是当我应用有关四舍五入的规则时（rx：5; ry：5），它没有任何效果。 '内联'样式规则的工作，但我没有嵌入式和外部样式表的运气：svg css圆角不工作

<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>

任何想法，我哪里会出错？

来源

2011-12-31 pluke

rx和ry是常规属性而非表示属性。只有表示属性可以用CSS来设置样式。列出了各种常规/呈现属性here

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

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

来源

2011-12-31 12:49:52

，解释它，谢谢。有没有什么办法可以调整舍入的svg，就像你可以在CSS中使用'border-radius：5px;' – pluke 2011-12-31 13:45:39

这是显而易见的答案： – 2011-12-31 14:11:42

对不起，我应该更清楚的问题，是否有任何方式可以应用样式表或替代方法来达到相同的效果，因为CSS3现在允许通过'border-radius：为5px;'？我没有动态地创建SVG，而是在不同的网站上使用不同的风格。是“内联”它还是编写javascript来实时更改它的唯一方法？再次感谢您的帮助 – pluke 2011-12-31 16:09:05

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

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

来源

2012-01-01 17:06:37 Alex

svg css圆角不工作

回答

相关问题