web-dev-qa-db-ja.com

HTMLにSVGファイルを含め、それらにスタイルを適用することはできますか？

embedobjectおよびsvgタグを使用して、SVGファイルをHTMLファイルに含めることができます。

  • embedまたはobjectタグを使用するには、画像をURLにリンクする必要があります。 （これが私の好みです。HTMLコードに含まれるSVGコードがすべて好きではないので、そのままにしておきたいのです。）
  • svgタグ（AFAIK）を使用するには、HTMLコードにSVGコードをインラインで挿入する必要があります。

私の質問は：

SVGコード全体を配置せずにSVGアイコン、画像、およびその他のファイルをHTMLファイルに含め、それらにスタイルを適用できるようにするにはどうすればよいですか？JSを介してそれらを適用することもできます。

注意：

objectまたはembedを介してそれらを含めると、$("#my-svg-div").find("svg")（ところで、ほぼすべての回答）を使用しても、jQueryを介してそれらにアクセスできないようです。 SO言うべきです。）undefinedを取得します。

ありがとうございました！

javascriptjqueryhtmlcsssvg
15
Axinite

これは、（1）HTMLでSVGを使用するさまざまな方法、および（2）CSS/JSを介してSVGの個々の部分（つまりパス）をどのようにスタイル設定できるかについての最も包括的なウォークスルーです。

https://css-tricks.com/using-svg/

  1. 画像タグ内（つまり、<img src="picture.svg" />またはCSSの背景画像として=スタイルなし

  2. インライン-スタイルを崩しますが、HTMLが乱雑になります。 PHPここで役立ちます。または、gulpビルドタスクまたは何かを使用して、SVGが作業中のコードを混乱させないようにしながら、最終的にインラインにすることができます。

  3. オブジェクトとして、CSSwithin.svgファイルを追加できるようになりました。

    <svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

    または

    <?xml-stylesheet type="text/css" href="svg.css" ?>

  4. データURI-背景画像に最適です。スタイリングなし。

3
tayvano