如果两个部分不透明的形状重叠，我只能在重叠的位置显示一个形状吗? [英] If two partially opaque shapes overlap, can I show only one shape where they overlap?

问题描述

例如，如果您有一个简单的由圆形和矩形组成的间谍玻璃"形状，并且两者的轮廓都部分透明，那么您可以阻止在两个形状重叠的地方有效地降低不透明度吗?

For example if you have a simple "spy glass" shape made of a circle and a rectangle and the outlines of both are partially transparent, can you stop the opacity effectively being decreased where the two shapes overlap?

推荐答案

您可以使用过滤器来调整不透明度值.假设两个形状的不透明度值为0.5，那么您要使两个重叠的区域的不透明度值也均为0.5.

You can use a filter to tweak the opacity value. Say, both shapes have an opacity value of .5, then you want to make the area where both overlap to have an opacity value of .5 as well.

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
  <filter id="constantOpacity">
    <feComponentTransfer>
      <!-- This transfer function leaves all alpha values of the unfiltered
           graphics that are lower than .5 at their original values.
           All higher alpha above will be changed to .5.
           These calculations are derived from the values in
           the tableValues attribute using linear interpolation. -->
      <feFuncA type="table" tableValues="0 .5 .5" />
    </feComponentTransfer>
  </filter>

  <line x2="300" y2="300" stroke="black" stroke-width="10"/>
  <path d="M0 150h300" stroke="blue" stroke-width="10"/>
  <g filter="url(#constantOpacity)">
    <rect x="50" y="50" width="150" height="150" opacity=".5" fill="green" id="rect1"/>
    <rect width="150" height="150" opacity=".5" fill="red" id="rect2"
          x="100" y="100"/>
  </g>
</svg

您可以看到，添加滤镜可以使背景以恒定强度发光.但是，形状的颜色会显示为更淡，更灰的外观(除非两种颜色相同).也许可以妥协，使用0 .5 .75之类的tableValues属性而不是0 .5 .5来减小alpha值.

You can see that adding the filter lets the background shine through so to say with constant intensity. However, the color of the shapes gets a paler, more grayish appearance (unless both colors are identical). Maybe you can go with a compromise, reducing the alpha value slightly less with a tableValues attribute like 0 .5 .75 instead of 0 .5 .5.

这篇关于如果两个部分不透明的形状重叠，我只能在重叠的位置显示一个形状吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！