SVGファイルがあり、HTMLページに含めたい。外部CSSファイルを使用してスタイルを設定したいのですが、SVG自体にスタイルシート参照を含めたくありません。
これは可能ですか?次に、これをどのように達成しますか?
this SO question で既に答えたように、SOMがDOMの一部である場合のみSVGをスタイルすることができます。を使用してロードする場合<img>
タグ、背景などとして、SVGファイルに直接あるCSSコードのみが有効になります。
質問の 最初の回答 this MDN記事 で説明されているように、インラインSVGの使用方法を示しています。
ただし、SVGを外部リソースに残しておき、テンプレートを変更するたびにcopy&pasteする必要がない場合は(この種の「解決策」については考えていませんでした)、単純な(テストされていない)AJAX呼び出しでDOMに動的にロードできます:
//Assuming you have jQuery available
$.ajax({
url: './mysvgFile.svg',
success: function(data) {
if (data.childNodes.length > 0) { //should be one, _could_ be more
$('.myDiv').append(data.childNodes[0]);
} else {
console.log('invalid SVG');
}
},
error: function(data) {
console.error('Error loading SVG!');
}
});
この時点で、スタイルシートはSVGの要素を操作できます。