Special Characteristics of SVG and CSS

In the past few days, I have read the CSS authoritative guide and previously saw the special nature of CSS. Today we have encountered a problem: Using styles in SVG.

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

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

Hello, out there

</text>

Today, when I adjusted the font-size of text in SVG, I found that no matter how I set the font-size of text, I could not change its size. Later I found the problem was a CSS style:

* {

font-size:12px;

}

This style will also affect the elements in the SVG label, but the intention is not true. But think about it. SVG, like firefox and chrome, is already part of html. * Although the particularity is only 0, 0 is more special than the font-size attribute value without particularity. Therefore, the font size is changed to 12px.

So what if I want to use JS to modify the size?

Simple: Use style. In-row styles have the highest particularity, so they can overwrite other styles.

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

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

Hello, out there

</text>