我可以在不使用 id 的情况下向 svg 元素添加蒙版吗？

Answer 1

不。您只能通过

id

引用蒙版。您无法以任何其他方式引用 SVG 蒙版。

Answer 2

根据您的描述，我了解到您有一个相同的图形实体，您想用不同的形式多次掩盖。干脆写下来：

<!-- start with an invisible svg that only contains mask definitions -->
<svg width="0" height="0"
     xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- first, you have a circular mask -->
       <mask id="circle-mask">
         <circle cx="100" cy="100" r="80" fill="white" />
       </mask>   
        <!-- then, you have a different mask, lets say a diamond -->
       <mask id="diamond-mask">
         <polygon points="100,20 180,100 100,180 20,100" fill="white" />
       </mask>   
     </defs>
</svg>

<!-- further into your document, you want to mask a rectangle -->
<svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <!-- reference the circle mask -->
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" />
</svg>

<!-- with the circle again, as often as you want, nothing changes -->
<svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <!-- the mask is the same, so no difference to above -->
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" />
</svg>

<!-- and now with the diamond; that one is different -->
<svg id="svg3" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <!-- if the mask changes, you need to change the reference -->
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#diamond-mask)" />
</svg>

您还可以在样式表中引用蒙版，并根据蒙版形状为引用元素指定一个类：

.masked.circular rect {
    mask: url(#circle-mask);
}
.masked.diamond rect {
    mask: url(#diamond-mask);
}

<svg width="0" height="0"
     xmlns="http://www.w3.org/2000/svg">
    <defs>
       <mask id="circle-mask">
         <circle cx="100" cy="100" r="80" fill="white" />
       </mask>   
       <mask id="diamond-mask">
         <polygon points="100,20 180,100 100,180 20,100" fill="white" />
       </mask>   
     </defs>
</svg>

<svg id="svg1" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

<svg id="svg2" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

<svg id="svg1" class="masked diamond" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

Answer 3

规范的另一个奇妙的短视让我想住在树林里的小屋里。

这里有一个

<script>

，希望您能够将其放入 SVG 中并使用以下方法删除重复的蒙版 ID：

<script>
  const svg = document.currentScript.closest("svg");
  const mask = svg.querySelector("mask");
  const target = svg.querySelector("[mask]");
  const id = Math.random();
  mask.id = id;
  target.mask = `url(#${id})`;
</script>

使用

Math.random()

作为（几乎保证唯一的）id。

修改想法：

• 在生成新 ID 之前检查重复的 ID。
• 不要执行

  Math.random()

  ，而是保留任何原始

  id

  名称并附加一个递增整数，以获得更好的 SVG 渲染可读性（例如

  my-mask-1

  ）。
• 除了

  <mask>

  之外，还可以做其他需要唯一ID的事情。