web-dev-qa-db-ja.com

SVG塗りつぶしカラー透明度/アルファ？

SVG塗りつぶし色に透明度またはアルファレベルを設定することは可能ですか？

Fillタグに2つの値を追加してみました（fill = "＃044B94"からfill = "＃044B9466"に変更しました）が、うまくいきません。

colorssvgtransparencyalphafill
376
Ollie Glass

追加の属性を使用します。 fill-opacity：この属性は0.0から1.0までの10進数を取ります。 0.0は完全に透明です。

例えば：

<rect ... fill="#044B94" fill-opacity="0.4"/>

さらにあなたには以下があります：

  • ストロークのstroke-opacity属性
  • オブジェクト全体のopacity
577
Williham Totland

まだ完全に標準化されていない解決策として（CSS3の色の構文と一致していますが）、例えばfill="rgba(124,240,10,0.5)"を使うことができます。 Firefox、Opera、Chromeで問題なく動作します。

これが例です 。

74
Erik Dahlström
fill="#044B9466"

これはSVG内の RGBA色 の16進表記で、16進値で定義されています。これは有効ですが、すべてのプログラムが正しく表示できるわけではありません...

あなたはここにこの構文のためのブラウザサポートを見つけることができます： https://caniuse.com/#feat=css-rrggbbaa

2017年8月現在：Mozilla Firefox（54）、Apple Safari（10.1）およびMac OS X Finderの「クイックビュー」でRGBAの塗りつぶし色が正しく表示されるようになりました。ただし、Google Chromeはバージョン62まではこの構文をサポートしていませんでした（以前はExperimental Platform Featuresフラグを有効にしてバージョン54からサポートされていました）。

4
Mr-IDE

塗りつぶしを完全に透明にするために、fill="transparent"は現代のブラウザで機能するようです。しかし、Microsoft Word（Mac用）では動作しませんでした。私はfill-opacity="0"を使用する必要がありました。

0
Brett Donald

SVGのあなたの要素で属性fill-opacityを使ってください。

デフォルト値は1、最小値は0です。ステップでは10進値のEXを使用してください。注：fill-opacityを適用するにはfill colorを定義する必要があります。

私の例 を参照してください。

参照 - 。

0
Darlan Dieterich