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屋！