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圓角不工作

回答

相關問題