SVG 填充在嵌套元素中可用 space

Question

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

中未被子元素占用的space

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

Answer 1

您可以使用蒙版和滤镜来做到这一点。该滤镜从子级创建一个图像，其中所有不完全透明的像素变为黑色，所有完全透明的像素变为白色。然后将滤镜的结果和一个覆盖子项未覆盖的所有区域的白色矩形用作遮罩。

#parentElement {
  fill: rgba(204, 41, 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>

SVG 填充在嵌套元素中可用 space

SVG Fill available space in nested elements

css

python

svg

pycairo