web-dev-qa-db-ja.com

CSSを使用してSVG画像を反転しますか？

cssを使用して、.svg拡張子の画像ファイルを反転しようとしています。 .pngおよび.jpgファイルは、csswebkitプロパティを使用して反転できることを知っています。私はsvg画像に新しいです。 cssを使用して.svgイメージを反転することは可能ですか？

使ってみた

-webkit-filter:invert(1);
        filter:invert(1);

しかし、うまくいきませんでした。

cssimagesvgcss-filters
14
Dream Hunter - hashADH

SVG要素を直接スタイルするだけです

svg {
  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
          filter: invert(100%);
}

IE9以降では、 can<img src="" />要素でSVGを使用します。

img { /* svg on an img tag */
  -webkit-filter: invert(.75); /* safari 6.0 - 9.0 */
          filter: invert(.75);
}
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />

これをパーセンテージまたは数値として設定できます docs

<number>または<percentage>として指定された変換の量。 100%の値は完全に反転しますが、0%の値は入力を変更しません。 0%と100%の間の値は、エフェクトの線形乗数です。補間の欠損値は0です。

35
Engkus Kusnadi