是否可以在 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-only 标签吗？结果与其他 SVG 查看器类似。还有另一种方法可以切掉圆的各个部分吗？此图中的绿色是我要应用的蒙版。

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

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

Answer 1

我完全移除了蒙版并使用 stroke-dasharray 绘制了圆圈并旋转了它以便间隙位于正确的位置。

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

<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 的 stroke-dasharray 值（因为 3 倍对称）和第一个旋转值。你可以玩这些数字直到你得到一个完美的结果，但上面的值已经很不错了。

是否可以在 SVG 文件中创建遮罩？

Is it possible to create a mask in an SVG file?

html

svg

image

mask