SVGとCSSの特殊性
1592 ワード
ここ数日CSS権威ガイドを見ていると、前にCSSの特殊性という節を見ました.ちょうど今日、SVGでスタイルを使うという問題に遭遇しました.
今日、SVGのtextの文字サイズ(font-size)を調整したところ、textのfont-sizeをどのように設定してもサイズを変更できないことがわかりました.その後、問題はCSSのスタイルです.
このスタイルはSVGタグ内の要素にも影響しますが、確かに意向がありません.しかしよく考えてみると、firefoxやchromeのようにSVGを原生的にサポートしているブラウザSVGはhtmlの一部です.*の特殊性は0のみですが、0特殊性も特殊性のないfont-size属性値より優先されます.だからフォントをどのように修正しても12 pxです.
では、もし私がJSでサイズを変更したいなら、どうすればいいですか?
簡単です.styleを使えばいいです.行内スタイルの特殊性が最も高いので、他を覆うことができます.
<
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属性値より優先されます.だからフォントをどのように修正しても12 pxです.
では、もし私がJSでサイズを変更したいなら、どうすればいいですか?
簡単です.styleを使えばいいです.行内スタイルの特殊性が最も高いので、他を覆うことができます.
<
text
x
=
"250"
y
=
"150"
font-family
=
"Verdana"
fill
=
"blue"
style
=
"font-style:10px;"
>
Hello, out there
</
text
>