BinaryDevelop
  1. ホーム
  2. css

[解決済み] svg要素の色を変更するには？

2022-03-21 02:43:39

質問

をしたいのですが。 この技を使う とSVGの色を変えることができるのですが、今のところできていません。CSSにこれを入れても、私の画像は何があっても黒です。

私のコード 

.change-my-color {
  fill: green;
}

<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

解決方法は？

その方法では、画像の色を変えることはできません。SVGを画像として読み込んだ場合、ブラウザのCSSやJavascriptで表示方法を変更することはできません。

SVG画像を変更したい場合は、SVG画像を <object> , <iframe> または <svg> をインラインで表示します。

このテクニックをページ内で使用する場合は、Modernizrライブラリが必要です。ここでは、SVGのサポートをチェックし、条件付きでフォールバック画像を表示するかしないかを設定することができます。そして、SVGをインライン化し、必要なスタイルを適用することができます。

を参照してください。 

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

SVGをインライン化し、フォールバック画像にクラス名でタグ付けすることができます ( my-svg-alternate ): 

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

また、CSSでは no-svg クラスがModernizrから提供されています（CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) を使用して、SVG サポートの有無を確認します。SVG サポートがない場合、SVG ブロックは無視されて画像が表示され、そうでない場合、画像は DOM ツリー ( display: none ): 

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

次に、インライン化した要素の色を変更します。 

#time-3-icon {
   fill: green;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します