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

107

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

次のコードのようなものを使用することは可能ですか？

object svg { 
    fill: #fff; 
}

html css svg

— ジョシュア・ソルティーノ
ソース

私はこれを行うための軽量な方法を考え出しました。このQ＆Aを参照してください：stackoverflow.com/questions/11978995/...

— ドリュー・ベイカー

ここだ答え、実際に仕事を取得（からCSSで外部SVGファイルのスタイルプロパティを操作するには。）

— ファビアンSnauwaert

回答:

108

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

ただし、<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年更新：jquery-svgプラグインを使用して、組み込みのSVGにjsスクリプトとcssスタイルを適用できます。

— エリック・ダールストロム
ソース

これは外部スタイルシートをリンクする方法ですか？そうでない場合、それは可能ですか？

— ジョシュアソルティーノ

上記は、svgにスタイル要素を挿入します。はい、外部のスタイルシートにリンクするためにxhtmlリンク要素を挿入することも可能です。あるいは、xml-stylesheet処理命令（w3.org/Style/styling-XML.htmlを参照）を挿入することもできます。

— ErikDahlström

これはかなり素晴らしいエリックです！ただし、svgwebを含めずにこのトリックをChromeで機能させることができませんでした：code.google.com/p/svgweb ...何か私が間違っていることは何ですか？

— Matt WD

@ MattW-D：おそらくそのための新しい質問を開く必要があります。SvgwebはChromeでは必要ありません。

— ErikDahlström12年

ありがとうエリック、cssを介してsvgでfont-faceを機能させるために本当に苦労していました

— デイブ

SVGファイル自体の中にスタイルを含むスタイルブロックを置くことにより、javsscrptなしでこれを行うことができます。

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

— R Reveley
ソース

タグを使用してSVGを含める唯一の理由がSVGからのマークアップでソースコードを煩雑にしたくない場合は、SVGInjectなどのSVGインジェクターを確認する必要があります。

SVGインジェクションは、Javascriptを使用してSVGファイルをインラインでHTMLドキュメントに挿入します。これにより、SVGをCSSで完全にスタイル設定できるようにしながら、クリーンなHTMLソースコードが可能になります。基本的な例は次のようになります。

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— ワルヤマ
ソース

驚くばかり！きちんとしたツールをありがとう。

— Deleplace