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

SVG 中的 opacity 与 fill-opacity 有什么区别？
我引用了 fill-opacity 和 opacity 的文档，但我很困惑是什么意思

对比

最佳答案

区别正是名称所指示的:)。 fill-opacity 仅适用于元素的 fill(或换句话说，仅适用于其背景)，stroke-opacity 仅适用于 0x2518122313431231 至 3431231，而 3431231 则适用于两者
stroke 是一种后处理操作。也就是说，元素(或组)作为一个整体(填充 + 笔画)被渲染，然后根据不透明度设置调整透明度，而 opacity 和 opacity 是中间步骤，因此透明度单独添加到笔画和充满。因此，当 fill-opacity 和 stroke-opacity 一起使用时，结果仍然与使用 stroke-opacity 不同(因为填充上的透明度会让填充颜色在它们重叠的地方显示出来)。您可以在下面的前两个元素中直观地看到差异。

同样如罗伯特(在评论中)所指出的，fill-opacity 不适用于 opacity 而 fill-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>

关于javascript - svg 中的不透明度与填充不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37759898/