埋め込みSVGにスタイルを適用するには？

Question

<svg>タグを使用してSVGをドキュメントに直接含める場合、ドキュメントのスタイルシートを使用してCSSスタイルをSVGに適用できます。しかし、埋め込まれたSVGにスタイルを適用しようとしています（<object>タグを使用しています）。

次のようなコードを使用することはできますか？

object svg { 
    fill: #fff; 
} 

Answer 1

簡単な答え：スタイルはドキュメントの境界を超えて適用されないため、答えはありません。

ただし、<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); 

を別のオプションは、最初のメソッドを使用してスタイル要素を挿入し、次に@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：埋め込まれたSVGにjsのスクリプトやCSSスタイルを適用するために、あなたがjquery-svgプラグインを使用することができます。

Answer 2

SVGファイル自体にスタイルを含むスタイルブロックを置くことで、javsscrptを使用せずにこれを行うことができます。

<style type="text/css"> 
path, 
circle, 
polygon { 
    fill: #fff; 
    } 
</style>