可以允许SVG元素溢出其掩码吗？

Question

当前正在处理一个使用滑块比较SVG覆盖的两个不同图像的项目。滑块右侧的SVG带有蒙版，而左侧的SVG应该保持不变。

我的问题是，当使用蒙版应用这些样式时，蒙版会剪切它没有覆盖的任何元素。

复制CodePen：https://codepen.io/anon/pen/VNEOPy

超级极简再现：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
  <defs>
    <pattern
      id="pattern"
      width="10"
      height="10"
      patternUnits="userSpaceOnUse"
    >
      <circle cx="5" cy="5" r="5" fill="#999"></circle>
    </pattern>
    <mask id="masker">
      <rect x="0" y="0" width="25%" fill="url(#pattern)"></rect>
    </mask>
  </defs>

  <circle cx="50" cy="50" r="50" mask="url(#masker)"></circle>
</svg>

我想做的是将蒙版应用于蒙版覆盖的元素部分，并使其余元素保持可见/不变。

此CodePen演示了我正在寻找的行为，但是需要复制每个SVG（不幸的是，在我的情况下这在技术上不可行）：https://codepen.io/anon/pen/vMzwbP

有没有一种方法可以通过遮罩实现此行为？我看错地方了吗？

Answer 1

不。您将始终必须具有两个圆的实例。一种是应用了蒙版的，一种是没有蒙版（或反掩码）的。