svg中的不透明度与填充不透明度 [英] opacity vs fill-opacity in svg
问题描述
SVG中的opacity
与fill-opacity
有什么区别?
What is the difference in opacity
vs fill-opacity
in SVG?
我引用了文档填充不透明度和不透明,但我很困惑这是什么意思fill-opacity: opacity of the content of the current object
与opacity: transparency of an object
I referred the docs fill-opacity and opacity but I am confused what is meant by fill-opacity: opacity of the content of the current object
vs opacity: transparency of an object
推荐答案
不同之处恰恰是该名称所指示的内容:). fill-opacity
仅适用于元素的fill
(换句话说,仅是背景),stroke-opacity
仅适用于stroke
,而opacity
适用于两者.
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.
opacity
是一种后处理操作.也就是说,将元素(或组)作为整体(填充+笔画)进行渲染,然后根据不透明度设置调整透明度,而fill-opacity
和stroke-opacity
是中间步骤,因此单独添加透明度描边和填充.因此,当同时使用stroke-opacity
和fill-opacity
时,结果仍将与使用opacity
有所不同(因为填充上的透明性将使填充颜色在重叠的任何地方都能显示出来).您可以在下面的前两个元素中直观地看到差异.
The opacity
is kind of a post-processing operation. 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. 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). You can see the difference visually in the first two elements below.
罗伯特(在评论中)也指出,fill-opacity
不适用于image
,而opacity
则适用.
Also as indicated by Robert (in comments), fill-opacity
doesn't apply to image
whereas opacity
does work.
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>
在CSS世界中,您可以将其视为以下代码段中所示的内容. (请注意,我并不是说它们是相等的, SVG和CSS之间存在细微的差异.这只是试图解释这些SVG属性在CSS中的解释.)
In the CSS world you can think of it as something like in the below snippet. (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.)
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>
这篇关于svg中的不透明度与填充不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!