19

いくつかの SVG ファイルを含むページがあります。これらの SVG ファイルのスタイルを同期するために、すべてのスタイル情報を保持する単一のスタイルシートを作成したいと考えました。

ただし、以下のように SVG を含めると、CSS が適用されません。これに対する解決策を持っている人はいますか、またはによって参照されるSVG内の他の(CSS)ファイルにリンクすることはできません<img src="..." />か?

以下のコード例を参照してください。pic.svgブラウザーに直接ロードすると、すべてのスタイルが適用され、緑色の四角形が表示されます。しかし、開くpage.htmと見えるのは黒い長方形だけです。したがって、明らかに、定義されたスタイルはどれも適用されませんでした。

page.htm

<!DOCTYPE html>
<html>
<body>
    <img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>

pic.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    >
    <rect x="10" y="10" width="80" height="80" />
</svg>

スタイル.css

rect { 
    stroke: black;
    fill: green;
}

編集

ここに短時間登場したという回答から、仕様へのこのリンクと次の引用を取得しました。私の意見では、上記のコードは機能するはずです。

'img'、'object' (HTML)、または 'image' (SVG) 要素を含む HTML または XML ドキュメントに埋め込まれたスタンドアロンの SVG ドキュメント

[...]

リンクからの引用 "参照された SVG ドキュメント内の任意の場所で定義されたスタイル シート (スタイル要素またはスタイル属性内、またはスタイル シート処理命令にリンクされた外部スタイル シート内)は、SVG ドキュメント全体に適用されますが、参照ドキュメントには影響しません (おそらく HTML または XHTML)」。

4

3 に答える 3