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>

转载于:https://www.cnblogs.com/zhaobl/archive/2011/04/28/2031369.html