html - 是否可以在 SVG 文件中创建蒙版？

Question

我创建了这个 SVG，它可以在网络浏览器中正确显示。

<svg width="256" height="256">
  <defs>
<g id="maskPath">
  <polygon points="101 50 135 50 135 29 101 29" fill="black" transform="rotate(10, 101, 24)"/>
  <polygon points="121 50 155 50 155 29 121 29" fill="black" transform=" rotate(-10, 155, 24)"/>
</g>
<g id="symmetry" mask="url">
  <polygon points="128 124 116 100 124 100 124 56 132 56 132 100 140 100 128 124"/>
  <polygon points="96 29 160 29 160 24 96 24"/>
  <polygon points="96 24 120 24 120 19 96 19" transform="rotate(100, 96, 24)"/>
  <polygon points="136 24 160 24 160 19 136 19" transform="rotate(-100, 160, 24)"/>
</g>
  </defs>
  <mask id="mask">
<rect width="256" height="256" fill="white"/>
<use href="#maskPath" transform="rotate (0, 128, 128)"/>
<use href="#maskPath" transform="rotate (120, 128, 128)"/>
<use href="#maskPath" transform="rotate (-120, 128, 128)"/>
  </mask>
  <use href="#symmetry" transform="rotate (0, 128, 128)"/>
  <use href="#symmetry" transform="rotate (120, 128, 128)"/>
  <use href="#symmetry" transform="rotate (240, 128, 128)"/>
  <circle cx="128" cy="128" r="56" stroke="black" stroke-width="12" fill-opacity="0"/>
  <circle cx="128" cy="128" r="88" stroke="black" stroke-width="5" fill-opacity="0" mask="url(#mask)"/>
</svg>

但是，如果我将扩展名更改为 .svg并在 SVG 查看器中打开它，它显示不正确。看起来就像 <defs> 中的一切和<mask>丢失了。

是 <mask>和<defs>仅 HTML 标签？其他 SVG 查看器的结果类似。有没有其他方法可以将圆的一部分切掉？ 该图像中的绿色是我要应用的蒙版。

背景必须是透明的，所以我不能只使用白色来创建假蒙版。

编辑:替换 href与 xlink:href使箭头出现，但外圆仍然缺失。 (在 Inkscape 中，圆圈就在那里，但没有被遮盖。)

Answer 1

我已经完全删除了蒙版，并使用描边虚线数组绘制了圆圈，然后旋转它，使间隙位于正确的位置。

由于没有光栅掩模操作，因此效率更高。

<svg width="256" height="256">
  <defs>
<g id="symmetry">
  <polygon points="128 124 116 100 124 100 124 56 132 56 132 100 140 100 128 124"/>
  <polygon points="96 29 160 29 160 24 96 24"/>
  <polygon points="96 24 120 24 120 19 96 19" transform="rotate(100, 96, 24)"/>
  <polygon points="136 24 160 24 160 19 136 19" transform="rotate(-100, 160, 24)"/>
</g>
  </defs>
  <use href="#symmetry" transform="rotate (0, 128, 128)"/>
  <use href="#symmetry" transform="rotate (120, 128, 128)"/>
  <use href="#symmetry" transform="rotate (240, 128, 128)"/>
  <circle cx="128" cy="128" r="56" stroke="black" stroke-width="12" fill="none"/>
  <circle cx="128" cy="128" r="88" stroke="black" stroke-width="5" fill="none" stroke-dasharray="118.3 66" transform="rotate(51.4, 128, 128)"/>
</svg>

准确值由 Paul LeBeau 提供

这里有 3 个关键数字，必须添加到 2 x PI/3(因为 3 倍对称)的描边-dasharray 值和第一个旋转值。您可以使用这些数字，直到获得完美的结果，但上面的值相当不错。