web-dev-qa-db-ja.com

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

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

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

1
BarbuDorel

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

1
Clijsters