svg 中的不透明度与填充不透明度

Question

opacity 与 fill-opacity 在 SVG 中有什么区别？

我参考了 fill-opacity 和 opacity 的文档，但我很困惑这是什么意思

fill-opacity: 当前对象内容的不透明度

对比

不透明度：对象的透明度

原文由 ak_rails 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

区别正是名称所指示的:)。 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 而 opacity 适用于两者。

opacity 是一种后处理操作。也就是说，元素（或组）作为一个整体（填充+描边）被渲染，然后根据不透明度设置调整透明度，而 fill-opacity 和 stroke-opacity 是中间的步骤，因此透明度被单独添加到描边和填充。所以当 stroke-opacity 和 fill-opacity 一起使用时，结果仍然与使用 opacity 不同在它们重叠的地方显示出来）。您可以在下面的前两个元素中直观地看到差异。

同样如罗伯特（在评论中）所示， 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>

原文由 Harry 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 Andrew Willems 发布，翻译遵循 CC BY-SA 3.0 许可协议