わかりました...ここに行きます。 SVGの実験を開始しました。 SVGを使用してCSSクラスを適用することは魅力的です。私は何が間違っているのかわかりませんが、クラスをsvgテキスト要素で動作させることはできません。私はそれを完全に削除しました、これは私が得たものです:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Playground</title>
</head>
<body>
<style type="text/css">
.mainsvg {
height: 320px;
border: 1px solid red;
width: 400px;
}
.caption {
color: yellow;
}
</style>
<h2>SVG - Sandbox</h2>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
<text x="65" y="40" class="caption">Fact</text>
</svg>
</div>
</body>
</html>
http://www.w3.org/TR/SVG/styling.html#ClassAttribute によると、これは動作するはずです...
何を変更すべきか、または代替案に関するヒント/ヒントはありますか?
クラスの設定は正しいが、CSSカラープロパティはSVGに影響を与えません。 SVGは fill および stroke プロパティを使用します。あなたの場合、おそらくあなたは塗りつぶすために色を変更する必要があります。これにより、Firefoxで黄色のテキストが表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Playground</title>
</head>
<body>
<style type="text/css">
.mainsvg {
height: 320px;
border: 1px solid red;
width: 400px;
}
.caption {
fill: yellow;
}
</style>
<h2>SVG - Sandbox</h2>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
<text x="65" y="40" class="caption">Fact</text>
</svg>
</div>
</body>
</html>