SVG塗りつぶし色透明度/アルファ？

416

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

フィルタグに2つの値を追加しようとしましたが（からfill="#044B94"に変更fill="#044B9466"）、これは機能しません。

colors  svg  transparency  alpha  fill 
— Ollie Glass
ソース
興味のある人のために、空の塗りつぶしを超えるクリックを受信する：参照「：なし塗りつぶし」SVGは、上のイベントをOnclickイベント検出 -すなわち使用する可能性fill="none"を持ちますpointer-events="visible"。
— Fabien Snauwaert、

回答:

645

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

例えば：

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

さらに、次のものがあります。

  • stroke-opacity ストロークの属性
  • opacity オブジェクト全体
— ウィリハムトットランド
ソース
3
MDNは、SVGチュートリアルのdeveloper.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
— t-mart
4
これらをスタイル属性に入れることもできます：<rect style = "fill：＃044B94; fill-opacity：0.4;" />
— PeterVermont 2016
上記では、「fill-opacity」と「stroke-opacity」を「fill_opacity」と「stroke_opacity」に置き換える必要があります（つまり、ハイフンをアンダースコアに置き換えます）。
— メルマルダッド
1
@mermaldad不正解です。仕様を参照してください。名前にハイフンを含めることを許可しない一部の言語では、SVGを操作するためのライブラリはのような名前を使用しますfill_opacityが、SVGおよびCSSではfill-opacityです。
— Williham Totland
@WillihamTotland、訂正ありがとうございます。私は「Pythonでsvgwriteを使用してこれを実装するにはどうすればよいですか」に心からまっすぐジャンプしました。そこでハイフンをアンダースコアに置き換える必要があります。
— メルマルダッド
78

まだ完全に標準化されていないソリューションとして（CSS3のカラー構文に合わせて）、たとえばを使用できますfill="rgba(124,240,10,0.5)"。Firefox、Opera、Chromeで正常に動作します。

ここに例があります。

— エリック・ダールストロム
ソース
3
w3.org/TR/SVG/painting.html#FillPropertiesを見てください（少し下にスクロールすると、fill-opacityになります）。かなり完全に標準化されているように見えます。
— Williham Totland '19
10
@williham：はい、fill-opacityはSVG勧告にあり、それを使用しても問題はありません。CSS3構文はCSS3 Colorであり、これはw3c勧告になるまでの1ステップです。SVG 1.1は、当時は利用できなかったため、CSS3 Colorを参照していません。SVGの将来のバージョンでは、おそらく可能です。
— ErikDahlström、
7
ただ、言及したい、これが動作するようには思えない一つの場所はInkscapeのである
— ジョージマウアー
2
Highchartsでこのソリューションを使用しましたが、うまくいきました。これは、変換rgbaにrgbし、自動的に追加fill-opacityそれに属性を。これが通常のSVGでも同様に機能するかどうかはわかりませんが、そのように機能します。いずれにせよ、ありがとう。
— ハンナ
3
インラインsvgで実際にrgbaをサポートしているブラウザーをいくつか説明してもらえますか？
— redanimalwar 16
6 
fill="#044B9466"

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

この構文のブラウザーサポートは、https：//caniuse.com/#feat=css-rrggbbaaにあります。

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

— Mr-IDE
ソース
彼らが最近何かを変えたかどうか知っていますか？fill：rgb（...）を使用するChromeアプリケーションが機能していて、完全に壊れています。よろしくお願いします！
— Mariodiar 2017
Qt SVGライブラリ（Qt 5.9.3）も、これまでのところ、「＃00000000」16進形式でも「rgba」としてもRGBAカラーを処理できません。
— bkausbk
2

塗りつぶしを完全に透明にするにfill="transparent"は、最新のブラウザで機能するようです。しかし、それはMicrosoft Word（for Mac）では機能しなかったため、を使用する必要がありましたfill-opacity="0"。

— ブレット・ドナルド
ソース
以下のためのInkscapeドローソフト0.92.4.0、fill="none"動作しますが、fill="transparent"しません。
— SAMM
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.