css SVG中的不透明度与填充不透明度

bakd9h0s  于 2023-06-25  发布在  其他
关注(0)|答案(4)|浏览(220)

SVG中opacityfill-opacity有什么区别?
我参考了fill-opacityopacity的文档,但我搞不清楚
填充不透明度:当前对象内容的不透明度
vs
不透明度:对象的透明度

wgx48brx

wgx48brx1#

不同之处正是名称所指示的:)。fill-opacity仅适用于元素的fill(或者换句话说,仅适用于其背景),stroke-opacity仅适用于stroke,而opacity可适用于两者。
opacity是一种后处理操作。也就是说,元素(或组)作为一个整体(填充+笔划)被渲染,然后透明度基于不透明度设置进行调整,而fill-opacitystroke-opacity是中间步骤,因此透明度单独添加到笔划和填充。因此,当stroke-opacityfill-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>

在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>
yduiuuwa

yduiuuwa2#

除了影响每个单独元件的哪些部分受影响之外(例如填充与描边)另一个区别是当元素在组内重叠时会发生什么。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>
wlsrxk51

wlsrxk513#

fill-opacity控制填充颜色的不透明度。opacity控制整个物体的不透明度。
看看这个demo:https://jsfiddle.net/DerekL/9mvrL66g/

fcwjkofz

fcwjkofz4#

我发现这个表在考虑使用哪种opacity风格的SVG时很有帮助。不要忘记stroke-opacitystop-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                       |

相关问题