☰

'svg' 要素の色を変更するにはどうすればいいですか? 質問する

tag-icon • tag-icon css svg colors
'svg' 要素の色を変更するにはどうすればいいですか? 質問する

したいこのテクニックを使う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>

ベストアンサー1

2020年の答え

CSSフィルターは現在のすべてのブラウザで動作します

SVGの色を変更するには

  1. タグを使用して SVG 画像を追加します<img>。

    <img src="dotted-arrow.svg" class="filter-green"/>

  2. 特定の色にフィルタリングするには、以下を使用しますCodepen (ここをクリックして Codepen を開きます)16進数のカラーコードをCSSフィルターに変換するには:

    たとえば、出力は次のように#00EE00なります。

    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

    filter任意の色を生成するここ。

  3. filterこのクラスにCSS を追加します。

    .filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

おすすめ記事