SVG中opacity
与fill-opacity
的区别是什么?
我提到了文档fill-opacity和opacity,但我很困惑fill-opacity: opacity of the content of the current object
与opacity: transparency of an object
答案 0 :(得分:18)
区别正是名称所示的差异:)。 fill-opacity
仅适用于元素的fill
(换言之,仅适用于其背景),stroke-opacity
仅适用于stroke
而opacity
适用于两者。
opacity
是一种后处理操作。也就是说,渲染元素(或组)作为整体(填充+笔划),然后根据不透明度设置调整透明度,而fill-opacity
和stroke-opacity
是中间步骤,因此透明度单独添加到笔触和填充。因此,当stroke-opacity
和fill-opacity
一起使用时,结果仍然与使用opacity
的结果不同(因为填充的透明度会让填充颜色显示在它们重叠的任何位置) 。您可以在下面的前两个元素中直观地看到差异。
同样如Robert(评论中)所示,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>
&#13;
在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;
}
&#13;
<div></div>
<div></div>
<div></div>
&#13;
答案 1 :(得分:3)
除了影响每个单独元素的哪些部分受到影响(例如填充与笔划)之外,另一个差异是当元素在组内重叠时发生的情况。 opacity
会影响整个群体的透明度,而fill-opacity
会影响群组中各个元素的透明度。这样的一个结果是,当这样的组内的元素重叠时,在使用fill-opacity
时在重叠区域中存在复合效果,而在使用opacity
时不存在复合效果。当(填充)不透明度为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>
&#13;
答案 2 :(得分:2)
fill-opacity
控制填充颜色的不透明度。 opacity
控制整个事物的不透明度。
答案 3 :(得分:2)
我在考虑opacity
与SVG
使用哪种风格时发现此表格很有用。我们不要忘记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 |