SVG與CSS的特殊性

這幾天在看CSS權威指南，之前看到了CSS的特殊性這一節。正好今天遇到了個相關問題：在SVG中使用樣式。

<text x="250" y="150"

font-family="Verdana" font-size="10px" fill="blue" >

Hello, out there

</text>

今天在調整SVG中text的文字大小（font-size）時，發現我不論如何設定text的font-size都無法改變其大小。後來發現問題在於一個CSS的樣式：

* {

font-size:12px;

}

這個樣式還會影響SVG標籤內的元素，確實意向不到。不過仔細想想，像firefox、chrome這樣原生支援SVG的瀏覽器SVG已經是html的一部分了。*的特殊性雖然只有0，但是0特殊性也比沒有特殊性的font-size屬性值要優先考慮。故字型怎麼修改都是12px。

那麼如果我要用JS來修改大小，怎麼辦呢？

很簡單，使用style即可。行內樣式的特殊性是最高的，故可以覆蓋掉其他。

<text x="250" y="150"

font-family="Verdana" fill="blue" style="font-style:10px;">

Hello, out there

</text>