[解決済み] 埋め込みSVGにスタイルを適用するには？

質問

SVGを直接文書に取り込む際に <svg> タグを使用して SVG を文書に直接含める場合、文書のスタイルシートを介して SVG に CSS スタイルを適用することができます。しかし、私は、埋め込まれた SVG にスタイルを適用しようとしています（タグを使用します）。 <object> タグを使用) にスタイルを適用しようとしています。

以下のコードのようなものは使用できないのでしょうか？

object svg { 
    fill: #fff; 
}

どのように解決するのですか？

短い答え：いいえ、スタイルはドキュメントの境界を越えて適用されないからです。

しかし、あなたは <object> タグがあるので、svg ドキュメントにスクリプトを使用してスタイルシートを挿入することができます。

このようなもので、このコードは <object> が完全にロードされていることを想定しています。

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

を挿入することも可能です。 <link> 要素を挿入して、外部スタイルシートを参照することもできます。

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

さらに別の方法として、最初の方法で style 要素を挿入し、@import 規則を追加することもできます。 styleElement.textContent = "@import url(my-style.css)" .

もちろん、スクリプトを使わずに、svgファイルからスタイルシートに直接リンクすることもできます。以下のいずれかが機能するはずです。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

または

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

2015年アップデート：使用できるようになりました。 jquery-svg プラグインを使用すると、埋め込まれたSVGにjsスクリプトとcssスタイルを適用することができます。