外部スタイルシートを使用してSVGをスタイルする方法は？

Question

SVGファイルがあり、HTMLページに含めたい。外部CSSファイルを使用してスタイルを設定したいのですが、SVG自体にスタイルシート参照を含めたくありません。

これは可能ですか？次に、これをどのように達成しますか？

Answer 1

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の要素を操作できます。