SVG fill color transparency / alpha?

 

Is it possible to set a transparency or alpha level on SVG fill colours?

I've tried adding two values to the fill tag (changing it from fill="#044B94" to fill="#044B9466"), but this doesn't work.

You use an addtional attribute; fill-opacity : This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent.

For example: 

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

Additionally you have the following:

  • stroke-opacity attribute for the stroke
  • opacity for the entire object

    • As a not yet fully standardized solution (though in alignment with the color syntax in CSS3) you can use eg fill="rgba(124,240,10,0.5)" . Works fine in Firefox, Opera, Chrome.

    Here's an example. 

    fill="#044B9466"

    This is an RGBA color in hex notation inside the SVG, defined with hex values. This is valid, but not all programs can display it properly...

    You can find the browser support for this syntax here: https://caniuse.com/#feat=css-rrggbbaa

    As of August 2017: RGBA fill colors will display properly on Mozilla Firefox (54), Apple Safari (10.1) and Mac OS X Finder's "Quick View". However Google Chrome did not support this syntax until version 62 (was previously supported from version 54 with the Experimental Platform Features flag enabled).

    链接地址: http://www.djcxy.com/p/87084.html

    上一篇: 如何在Java中将字节数组转换为十六进制字符串？

    下一篇: SVG填充颜色透明度/ alpha？