SVG填充嵌套元素中的可用空间

编程问答 2022-05-24

问题描述

我正在生成一个带有嵌套元素的 SVG。对于元素的样式，父容器和子元素需要单独的填充颜色和不透明度。然而，由于不透明，颜色重叠，这不是一个干净的结果。有没有办法只填充父容器中没有被子元素占用的空间

我正在寻找一个等效的多边形evenodd 填充规则，但用于嵌套元素

enter image description here

解决方法

你可以用一个面具和一个过滤器来做到这一点。过滤器从子对象创建一个图像，其中所有不完全透明的像素变为黑色，所有完全透明的像素变为白色。然后将过滤器的结果和一个覆盖子级未覆盖的所有区域的白色矩形用作蒙版。

#parentElement {
  fill: rgba(204,41,0.3);
}

#childElement {
  fill: green;
  opacity: 0.2;
}
<svg width=400 height=400>
  <defs>
    <filter id="mask-filter">
      <feComponentTransfer>
        <feFuncA type="linear" slope="255" intercept="0"></feFuncA>
      </feComponentTransfer>      
      <feColorMatrix type="matrix"
          values="0 0 0 -1 1
                  0 0 0 -1 1
                  0 0 0 -1 1
                  0 0 0 0 1" />
    </filter> 
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="white" />
      <use xlink:href="#childElement" filter="url(#mask-filter)" />
    </mask>
  </defs>
  <rect id="parentElement" x=10 y=10 width=140 height=100 mask="url(#mask1)" />
  <rect id="childElement" x=60 y=40 width=240 height=140 />
</svg>

pycairopythonsvgsvgsvg