[英]opacity vs fill-opacity in svg
What is the difference in opacity
vs fill-opacity
in SVG? SVG 中的opacity
与fill-opacity
什么区别?
I referred the docs for fill-opacity and opacity but I am confused what is meant by我提到了填充不透明度和不透明度的文档,但我很困惑是什么意思
fill-opacity: opacity of the content of the current object fill-opacity:当前对象内容的不透明度
vs对比
opacity: transparency of an object不透明度:对象的透明度
The difference is exactly what the name indicates :).区别正是名称所指示的:)。 fill-opacity
is applicable only to the fill
of the element (or in other words, just its background), stroke-opacity
is applicable only to the stroke
whereas the opacity
is applicable to both. fill-opacity
仅适用于元素的fill
(或者换句话说,仅适用于其背景), stroke-opacity
仅适用于stroke
而opacity
则适用于两者。
The opacity
is kind of a post-processing operation. opacity
是一种后处理操作。 That is, the element (or group) as a whole (the fill + stroke) is rendered and then the transparency is adjusted based on the opacity setting whereas the fill-opacity
and stroke-opacity
are intermediate steps, so the transparency is individually added to the stroke and fill.也就是说,元素(或组)作为一个整体(填充 + 描边)被渲染,然后根据不透明度设置调整透明度,而fill-opacity
和stroke-opacity
是中间步骤,因此单独添加透明度到描边和填充。 So when stroke-opacity
and fill-opacity
are used together, the result would still not be the same as using opacity
(because the transparency on the fill will let the fill color show through wherever they overlap).因此,当一起使用stroke-opacity
和fill-opacity
时,结果仍然与使用opacity
(因为填充上的透明度会让填充颜色在它们重叠的地方显示出来)。 You can see the difference visually in the first two elements below.您可以在下面的前两个元素中直观地看到差异。
Also as indicated by Robert (in comments), fill-opacity
doesn't apply to image
whereas opacity
does work.同样正如罗伯特(在评论中)所指出的, fill-opacity
不适用于image
而不opacity
确实有效。
svg { width: 100vw; height: 100vh; } body { background: url(http://lorempixel.com/600/600/nature/1); height: 100vh; } polygon { stroke-width: 3; }
<svg viewBox='0 0 40 190'> <polygon points='10,10 30,10 30,30 10,30' fill='steelblue' stroke='crimson' opacity='0.5' /> <polygon points='10,40 30,40 30,60 10,60' fill='steelblue' stroke='crimson' fill-opacity='0.5' stroke-opacity='0.5' /> <polygon points='10,70 30,70 30,90 10,90' fill='steelblue' stroke='crimson' fill-opacity='0.5' /> <polygon points='10,100 30,100 30,120 10,120' fill='steelblue' stroke='crimson' stroke-opacity='0.5' /> <image xlink:href='http://lorempixel.com/100/100/nature/3' x='8.5' y='130' width='23' height='23' stroke='crimson' opacity='0.5' /> <image xlink:href='http://lorempixel.com/100/100/nature/3' x='8.5' y='160' width='23' height='23' stroke='crimson' fill-opacity='0.5' /> </svg>
In the CSS world you can think of it as something like in the below snippet.在 CSS 世界中,您可以将其视为类似于以下代码段中的内容。 ( Note that I am not saying they are equal, there are subtle differences between SVG and CSS . It is just an attempt to explain what those SVG attributes would translate to in CSS. ) (请注意,我并不是说它们相等, SVG 和 CSS 之间存在细微差别。这只是试图解释这些 SVG 属性将在 CSS 中转换为什么。 )
div { height: 20vh; width: 20vh; margin: 30px auto; font-family: Verdana; font-size: 2vw; } div:nth-of-type(1) { opacity: 0.5; background: rgba(70, 130, 180, 1); border: .35vw solid rgba(220, 20, 60, 1); } div:nth-of-type(2) { background: rgba(70, 130, 180, 0.5); border: .35vw solid rgba(220, 20, 60, 1); } div:nth-of-type(3) { background: rgba(70, 130, 180, 1); border: .35vw solid rgba(220, 20, 60, 0.5); } body { background: url(http://lorempixel.com/600/600/nature/1); height: 100vh; }
<div></div> <div></div> <div></div>
In addition to affecting which parts of each individual element are affected (eg fill versus stroke) another difference is what happens when elements overlap within a group.除了影响每个单独元素的哪些部分受到影响(例如填充与描边)之外,另一个区别是当元素在组内重叠时会发生什么。 opacity
affects the transparency of the group as a whole while fill-opacity
affects the transparency of the individual elements within the group. opacity
影响整个组的透明度,而fill-opacity
影响组内各个元素的透明度。 One consequence of this is that when elements within such a group overlap, there is a compounding effect in the region of overlap when fill-opacity
is used but not when opacity
is used.这样做的一个后果是,当此类组内的元素重叠时,使用fill-opacity
时重叠区域会产生复合效果,而使用不opacity
则不会。 This is demonstrated in the image below when a (fill-)opacity of 0.5 is applied to either each element within a group or to the group itself.当(填充)不透明度为 0.5 应用于组内的每个元素或组本身时,这在下图中得到了证明。
<svg height="200"> <g transform="translate(0, 0)"> <rect x="10" y="10" width="40" height="40" fill-opacity="0.5"/> <rect x="30" y="30" width="40" height="40" fill-opacity="0.5"/> </g> <g transform="translate(80, 0)" fill-opacity="0.5"> <rect x="10" y="10" width="40" height="40"/> <rect x="30" y="30" width="40" height="40"/> </g> <g transform="translate(0, 80)"> <rect x="10" y="10" width="40" height="40" opacity="0.5"/> <rect x="30" y="30" width="40" height="40" opacity="0.5"/> </g> <g transform="translate(80, 80)" opacity="0.5"> <rect x="10" y="10" width="40" height="40"/> <rect x="30" y="30" width="40" height="40"/> </g> <text transform="translate(170,45)">fill-opacity</text> <text transform="translate(170,125)">opacity</text> <text transform="translate(10,175)">applied to</text> <text transform="translate(0,190)">each element</text> <text transform="translate(90,175)">applied to</text> <text transform="translate(103,190)">group</text> </svg>
fill-opacity
controls the opacity for the fill color. fill-opacity
控制填充颜色的不透明度。 opacity
controls the opacity of the entire thing. opacity
控制整个事物的不透明度。
Take a look at this demo: https://jsfiddle.net/DerekL/9mvrL66g/看看这个演示: https : //jsfiddle.net/DerekL/9mvrL66g/
I found this table helpful when considering which flavor of opacity
to use with SVG
.在考虑与SVG
一起使用哪种opacity
时,我发现此表很有帮助。 Let's not forget about stroke-opacity
and stop-opacity
.让我们不要忘记stroke-opacity
和stop-opacity
。
| Attribute | Explanation | Applies to: |
|:--------------:|:----------------------------------:|:------------------------------------:|
| opacity | The overall opacity of the element.| Everything but gradient stops |
| fill-opacity | The opacity of the fill paint. | Elements with the attribute 'fill' |
| stroke-opacity | The opacity of the stroke paint. | Elements with the attribute 'stroke' |
| stop-opacity | The opacity of the gradient stop. | Gradient stops |
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.