代码之家 › 专栏 › 技术社区 › software_writer

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

svg css javascript

software_writer · 技术社区 · 10 年前

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

我向医生咨询 fill-opacity 和 opacity 但我不明白这是什么意思

填充不透明度:当前对象内容的不透明度

与

不透明度:对象的透明度

4 回复 | 直到 5 年前

Harry dbr 10 年前

区别正是名称所表明的:)。 fill-opacity 仅适用于 fill 元素(或者换句话说,只是其背景), stroke-opacity 仅适用于 stroke 然而 opacity 适用于两者。

这个 不透明度 是一种后处理操作。也就是说,元素(或组)作为一个整体(填充+笔划)进行渲染,然后根据不透明度设置调整透明度,而 填充不透明度 和 笔划不透明度 是中间步骤,因此透明度分别添加到笔划和填充中。所以什么时候 笔划不透明度 和 填充不透明度 一起使用,结果仍然与使用不同 不透明度 (因为填充上的透明度会让填充颜色在重叠的地方显示出来)。您可以在下面的前两个元素中直观地看到差异。

正如罗伯特(在评论中)所指出的, 填充不透明度 不适用于 image 鉴于 不透明度 确实有效。

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>

Andrew Willems 9 年前

除了影响每个单独元素的哪些部分受到影响(例如填充与笔划)之外,另一个区别是当元素在组内重叠时会发生什么。 opacity 同时影响整个集团的透明度 fill-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>

Derek ææåå¤« 10 年前

fill-opacity 控制填充颜色的不透明度。 opacity 控制整个事物的不透明度。

看看这个演示: https://jsfiddle.net/DerekL/9mvrL66g/

Robert Longson 10 年前

我发现这张桌子在考虑哪种口味的 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                       |