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/p/2031369.html