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

debugcn 发表于 Dev

瓦扎克

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

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

u山

您可以使用遮罩和滤镜进行此操作。滤镜从子级创建图像，所有不完全透明的像素都变为黑色，而所有完全透明的像素都变为白色。然后将滤镜的结果和覆盖孩子没有覆盖的所有区域的白色矩形用作遮罩。

#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。