web-dev-qa-db-ja.com

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

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

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

object svg { 
    fill: #fff; 
}
htmlcsssvg
102
Joshua Sortino

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

ただし、_<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スタイルを適用できます。

104
Erik Dahlström

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

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>
10
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>
2
Waruyama