为什么 SVG 蒙版会因“使用”而变得部分透明

Question

下面的两个代码块是相同的，除了第二个代码块中的“use”标签试图重用 #p1 圆圈。

为什么切换到“使用”会导致遮罩变得部分透明？有没有一种方法可以保持不透明度，同时重复使用 #p1 圆圈？

<style>
  svg { background-color:#aaa }
  #p1 { fill:blue }
  #p2 { fill:red }
  #p3 { fill:green }
</style>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <rect width="100%" height="100%" fill="white" />
      <circle r="65" cx="150" cy="100" fill="black" />
    </mask>
  </defs>
  <circle id="p1" r="65" cx="150" cy="100" />
  <circle id="p2" r="65" cx="180" cy="175" />
  <circle id="p3" r="65" cx="100" cy="175" mask="url(#m1)" />
  <circle r="45" cx="150" cy="150" fill="white" />
</svg>

<style>
  svg { background-color:#aaa }
  #p1 { fill:blue }
  #p2 { fill:red }
  #p3 { fill:green }
</style>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <rect width="100%" height="100%" fill="white" />
      <use href="#p1" fill="black" />
    </mask>
  </defs>
  <circle id="p1" r="65" cx="150" cy="100" />
  <circle id="p2" r="65" cx="180" cy="175" />
  <circle id="p3" r="65" cx="100" cy="175" mask="url(#m1)" />
  <circle r="45" cx="150" cy="150" fill="white" />
</svg>

Answer 1

如果我采用第二个示例，并将

<use>

元素从蒙版移动到 SVG 的末尾，您可以看到填充颜色 - 即使您将填充属性值设置为黑色，它也是蓝色的。就像 Michael Mullany 在评论中提到的那样，这使得面具半透明。

<style>
  svg { background-color:#aaa }
  #p1 { fill:blue }
  #p2 { fill:red }
  #p3 { fill:green }
</style>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <rect width="100%" height="100%" fill="white" />
    </mask>
  </defs>
  <circle id="p1" r="65" cx="150" cy="100" />
  <circle id="p2" r="65" cx="180" cy="175" />
  <circle id="p3" r="65" cx="100" cy="175" mask="url(#m1)" />
  <circle r="45" cx="150" cy="150" fill="white" />
  <use href="#p1" fill="black" />
</svg>

我的猜测是你想让圆圈相互覆盖，这样看起来它们是交织在一起的。您可以通过使用一个“显示”当前圆圈但覆盖前一个圆圈的蒙版来做到这一点。

<svg viewBox="0 0 220 200" width="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask">
      <use href="#p1" fill="white" />
      <use href="#p1" fill="black" transform="rotate(-120)" />
    </mask>
    <circle id="p1" r="65" cy="-40"/>
  </defs>
  <g transform="translate(110 110)">
    <use href="#p1" fill="blue" mask="url(#mask)" />
    <use href="#p1" fill="red" mask="url(#mask)" transform="rotate(120)" />
    <use href="#p1" fill="green" mask="url(#mask)" transform="rotate(240)" />
  </g>
</svg>