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

【问题标题】：SVG Fill available space in nested elementsSVG 填充嵌套元素中的可用空间
【发布时间】：2021-05-26 13:19:59
【问题描述】：

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

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

【问题讨论】：

您可以尝试使用 svg fill-opacity作为属性或在 css 中，而不是更改不透明度。还有一个stroke-opacity。如果这不能解决您的问题，请添加一个工作示例，并可能向我们展示所需的结果

【解决方案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>

【讨论】：