blocks|key|896707|text|作为一种尚未完全标准化的解决方案(尽管与CSS3中的颜色语法一致)，您可以使用例如fill="rgba(124,240,10,0.5)"。在Firefox，Opera，Chrome中运行良好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|896708|Here's+an+example。|896709|entityMap|0|LINK|mutability|MUTABLE|url|http://xn--dahlstrm-t4a.net/svg/paint/rgba-syntax.xhtml^0|15|R|0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

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

<a href="http://xn--dahlstrm-t4a.net/svg/paint/rgba-syntax.xhtml" rel="noreferrer">Here's an example</a>.

blocks|key|679993|text|fill="#044B9466"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|679994|这是SVG中十六进制表示法的RGBA+color，用十六进制值定义。这是有效的，但并不是所有的程序都能正确显示它...|unstyled|offset|length|679995|您可以在此处找到对此语法的浏览器支持：https://caniuse.com/#feat=css-rrggbbaa|679996|截至2017年8月:+RGBA填充颜色将在Mozilla+Firefox+(54)、Apple+Safari+(10.1)和Mac+OS+X+Finder的“快速查看”上正确显示。但是，Google+Chrome在版本62之前不支持此语法(之前在启用了实验平台功能标志的情况下从版本54开始支持)。|679997|从2021年4月起，Inkscape+1.0.2版不能在SVG文件中读取此格式，而是将任何RGBA颜色转换为不透明黑色。错误报告在这里：https://gitlab.com/inkscape/inbox/-/issues/1195|679998|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/RGBA_color_space|1|https://caniuse.com/#feat=css-rrggbbaa|2|https://inkscape.org/|3|https://gitlab.com/inkscape/inbox/-/issues/1195^0|0|E|A|0|0|J|12|1|0|0|A|8|2|1W|1B|3|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|I|3|J|5|F|7|17|8|@]|9|@$G|18|H|19|1|1A]]|A|$]]|$1|K|3|L|5|F|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|1C|8|@]|9|@$G|1D|H|1E|1|1F]|$G|1G|H|1H|1|1I]]|A|$]]|$1|O|3|-4|5|F|7|1J|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|R|S|T|A|$U|Z]]|10|$5|R|S|T|A|$U|11]]]]

<pre><code>fill=&quot;#044B9466&quot;
</code></pre>
This is an <a href="https://en.wikipedia.org/wiki/RGBA_color_space" rel="nofollow noreferrer">RGBA color</a> 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: <a href="https://caniuse.com/#feat=css-rrggbbaa" rel="nofollow noreferrer">https://caniuse.com/#feat=css-rrggbbaa</a>
As of August 2017: RGBA fill colors will display properly on Mozilla Firefox (54), Apple Safari (10.1) and Mac OS X Finder's &quot;Quick View&quot;. However Google Chrome did not support this syntax until version 62 (was previously supported from version 54 with the Experimental Platform Features flag enabled).
As of April 2021, <a href="https://inkscape.org/" rel="nofollow noreferrer">Inkscape</a> version 1.0.2 cannot read this format in SVG files, and instead converts any RGBA color to opaque black. The bug report is here: <a href="https://gitlab.com/inkscape/inbox/-/issues/1195" rel="nofollow noreferrer">https://gitlab.com/inkscape/inbox/-/issues/1195</a>

blocks|key|896779|text|在SVG的元素中使用fill-opacity属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|896780|默认值为1，最小值为0，在步骤中使用十进制值例如:+0.5+=+alpha的50%25。注意:要应用fill-opacity，必须定义fill颜色。|896781|参见my+example。|896782|References。|896783|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/dieterich/pen/aGjWjW|1|https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity^0|A|C|0|1C|C|1T|4|0|2|A|0|0|0|A|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|J|3|K|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|L|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|O|P|Q|E|$R|U]]]]

Use attribute <code>fill-opacity</code> in your element of SVG.

Default value is 1, minimum is 0, in step use decimal values EX: 0.5 = 50% of alpha. Note: It is necessary to define <code>fill</code> color to apply <code>fill-opacity</code>.

See <a href="https://codepen.io/dieterich/pen/aGjWjW" rel="nofollow noreferrer">my example</a>.

<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity" rel="nofollow noreferrer">References</a>.

blocks|key|896820|text|为了使填充完全透明，fill="transparent"似乎可以在现代浏览器中工作。但它不能在微软的Word+(苹果电脑)，我必须使用fill-opacity="0"。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|896821|entityMap^0|A|I|1V|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

To make a fill completely transparent, <code>fill="transparent"</code> seems to work in modern browsers. But it didn't work in Microsoft Word (for Mac), I had to use <code>fill-opacity="0"</code>.

blocks|key|896921|text|要更改svg代码的透明度，最简单的方法是在任何文本编辑器中打开它并查找样式属性。这取决于svg创建者显示样式的方式。因为我是一个Inkscape用户，所以设置样式值的通常方法是通过一个样式标签，就像它是html一样，但是使用svg原生属性，如fill、stroke、stroke-width、opacity等。opacity会影响整个svg对象，或其声明的路径或组，而fill-opacity、stroke-opacity只会影响填充和笔触透明度。也就是说，我也曾经使用并尝试过只使用fill，而不是使用#fff，而是使用rgba(255,+255,+255,+1)标准，就像在css中一样。这对于现代浏览器来说工作得很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|896922|请记住，如果您打算进一步重新编辑您的svg，根据我的经验，最好的做法是手头始终保留一个未修改的版本。Inkscape使用手动更改的svg更加灵活，但是Illustrator和CorelDraw在导入和编辑svg时可能会遇到问题。|896923|示例|896924|<path+style="fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1"+d="m+144.44226,461.14425+q+16.3125,-15.05769+37.64423,-15.05769+21.33173,0+36.38942,15.05769+15.0577,15.05769+15.0577,36.38942+0,21.33173+-15.0577,36.38943+-15.05769,16.3125+-36.38942,16.3125+-21.33173,0+-37.64423,-16.3125+-15.05769,-15.0577+-15.05769,-36.38943+0,-21.33173+15.05769,-36.38942+z+M+28.99995,35.764435+l+85.32692,0+23.84135,52.701923+386.48078,0+q+10.03846,0+17.5673,7.528847+8.78366,7.528845+8.78366,17.567305+0,7.52885+-2.50962,12.54808+l+-94.11058,161.87019+q+-13.80288,27.60577+-45.17307,27.60577+l+-194.4952,0+-26.35096,40.15385+q+-2.50962,6.27404+-2.50962,7.52885+0,6.27404+6.27404,6.27404+l+298.64424,0+0,50.1923+-304.91828,0+q+-25.09615,0+-41.40865,-13.80288+-15.05769,-13.80289+-15.05769,-38.89904+0,-15.05769+6.27404,-25.09615+l+38.89903,-63.9952+-92.855766,-189.475962+-52.701924,0+0,-52.701923+z+M+401.67784,461.14425+q+15.05769,-15.05769+36.38942,-15.05769+21.33174,0+36.38943,15.05769+16.3125,15.05769+16.3125,36.38942+0,21.33173+-16.3125,36.38943+-15.05769,16.3125+-36.38943,16.3125+-21.33173,0+-36.38942,-16.3125+-15.05769,-15.0577+-15.05769,-36.38943+0,-21.33173+15.05769,-36.38942+z"/>|code-block|syntax|javascript|896925|示例2|896926|<path+style="fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1"+d="m+144.44226,461.14425+q+16.3125,-15.05769+37.64423,-15.05769+21.33173,0+36.38942,15.05769+15.0577,15.05769+15.0577,36.38942+0,21.33173+-15.0577,36.38943+-15.05769,16.3125+-36.38942,16.3125+-21.33173,0+-37.64423,-16.3125+-15.05769,-15.0577+-15.05769,-36.38943+0,-21.33173+15.05769,-36.38942+z+M+28.99995,35.764435+l+85.32692,0+23.84135,52.701923+386.48078,0+q+10.03846,0+17.5673,7.528847+8.78366,7.528845+8.78366,17.567305+0,7.52885+-2.50962,12.54808+l+-94.11058,161.87019+q+-13.80288,27.60577+-45.17307,27.60577+l+-194.4952,0+-26.35096,40.15385+q+-2.50962,6.27404+-2.50962,7.52885+0,6.27404+6.27404,6.27404+l+298.64424,0+0,50.1923+-304.91828,0+q+-25.09615,0+-41.40865,-13.80288+-15.05769,-13.80289+-15.05769,-38.89904+0,-15.05769+6.27404,-25.09615+l+38.89903,-63.9952+-92.855766,-189.475962+-52.701924,0+0,-52.701923+z+M+401.67784,461.14425+q+15.05769,-15.05769+36.38942,-15.05769+21.33174,0+36.38943,15.05769+16.3125,15.05769+16.3125,36.38942+0,21.33173+-16.3125,36.38943+-15.05769,16.3125+-36.38943,16.3125+-21.33173,0+-36.38942,-16.3125+-15.05769,-15.0577+-15.05769,-36.38943+0,-21.33173+15.05769,-36.38942+z"/>|896927|示例3|896928|<path+style="fill:rgba(255,+0,+0,+.5);stroke:rgba(242,+242,+242,+.5);stroke-width:2px"+d="m+144.44226,461.14425+q+16.3125,-15.05769+37.64423,-15.05769+21.33173,0+36.38942,15.05769+15.0577,15.05769+15.0577,36.38942+0,21.33173+-15.0577,36.38943+-15.05769,16.3125+-36.38942,16.3125+-21.33173,0+-37.64423,-16.3125+-15.05769,-15.0577+-15.05769,-36.38943+0,-21.33173+15.05769,-36.38942+z+M+28.99995,35.764435+l+85.32692,0+23.84135,52.701923+386.48078,0+q+10.03846,0+17.5673,7.528847+8.78366,7.528845+8.78366,17.567305+0,7.52885+-2.50962,12.54808+l+-94.11058,161.87019+q+-13.80288,27.60577+-45.17307,27.60577+l+-194.4952,0+-26.35096,40.15385+q+-2.50962,6.27404+-2.50962,7.52885+0,6.27404+6.27404,6.27404+l+298.64424,0+0,50.1923+-304.91828,0+q+-25.09615,0+-41.40865,-13.80288+-15.05769,-13.80289+-15.05769,-38.89904+0,-15.05769+6.27404,-25.09615+l+38.89903,-63.9952+-92.855766,-189.475962+-52.701924,0+0,-52.701923+z+M+401.67784,461.14425+q+15.05769,-15.05769+36.38942,-15.05769+21.33174,0+36.38943,15.05769+16.3125,15.05769+16.3125,36.38942+0,21.33173+-16.3125,36.38943+-15.05769,16.3125+-36.38943,16.3125+-21.33173,0+-36.38942,-16.3125+-15.05769,-15.0577+-15.05769,-36.38943+0,-21.33173+15.05769,-36.38942+z"/>|896929|请注意，在上一个示例中，fill-opacity+and+stroke-opacity已被删除，因为rgba标准在两种情况下都涵盖颜色和alpha通道。|896930|entityMap^0|3D|4|3I|6|3P|C|42|7|4B|7|54|C|5H|E|6Q|4|70|4|79|M|0|0|0|0|0|0|0|0|C|V|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1M|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1N|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1O|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1P|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1R|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|Z|$]]

To change transparency on an svg code the simplest way is to open it on any text editor and look for the style attributes. It depends on the svg creator the way the styles are displayed. As i am an Inkscape user the usual way it set the style values is through a style tag just as if it were html but using svg native attributes like <code>fill</code>, <code>stroke</code>, <code>stroke-width</code>, <code>opacity</code> and so on. <code>opacity</code> affects the whole svg object, or path or group in which its stated and <code>fill-opacity</code>, <code>stroke-opacity</code> will affect just the fill and the stroke transparency. That said, I have also used and tasted to just use <code>fill</code> and instead of using<code>#fff</code> use instead the rgba standard like this <code>rgba(255, 255, 255, 1)</code> just as in css. This works fine for must modern browsers.
Keep in mind that if you intend to further reedit your svg the best practice, in my experience, is to always keep an untouched version at hand. Inkscape is more flexible with hand changed svgs but Illustrator and CorelDraw may have issues importing and edited svg.
Example
<pre><code>&lt;path style=&quot;fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1&quot; d=&quot;m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z&quot;/&gt;
</code></pre>
Example 2
<pre><code>&lt;path style=&quot;fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1&quot; d=&quot;m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z&quot;/&gt;
</code></pre>
Example 3
<pre><code>&lt;path style=&quot;fill:rgba(255, 0, 0, .5);stroke:rgba(242, 242, 242, .5);stroke-width:2px&quot; d=&quot;m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z&quot;/&gt;
</code></pre>
Notice that in the last example the <code>fill-opacity and stroke-opacity</code> have been removed as rgba standard covers both color and alpha channel in both cases.

blocks|key|680280|text|我分享了一个相关的技巧，当你想让SVG继承容器的样式时，你可能会遇到这个技巧:在路径中使用fill='currentColor‘。这就是由字体可怕的图标生成的SVG可以采用应用于字体的任何前景颜色的方式！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|680281|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I am sharing a related tip that you might come across when you want the SVG to inherit the container's styles like normal state, hover state and visited state :
use fill='currentColor' on the path. This is how the SVG's produced by font awesome icons could take any fore color applied to fonts!

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 <code>fill="#044B94"</code> to <code>fill="#044B9466"</code>), but this doesn't work.

SVG fill color transparency / alpha?

容器

是否可以在SVG填充颜色上设置透明度或alpha级别？我尝试向fill标记添加两个值(将其从fill="#044B94"更改为fill="#044B9466")，但这不起作用。

问SVG填充颜色透明度/ alpha？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG填充颜色透明度/ alpha？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG填充颜色透明度/ alpha？
EN