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

Question

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

<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 查看器中是相似的。还有另一种方法可以切掉圆圈的一部分吗？此图像中的绿色是我要应用的蒙版。

背景必须是透明的，所以我不能只用白色来创建一个假面具。

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

标签： htmlimagesvgmask

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 折对称）和第一个旋转值。您可以使用数字直到获得完美的结果，但上面的值非常好。