我可以在 SVG 中应用剪切而不需要指定一个剪切路径 ID 吗？

Question

在我的标记中，我有一个类似于这样的块：

<svg width="0" height="0" style="display:none" id="dummy-wedge">
 <g class="dummy" transform="translate(100, 100)">
    <defs>
      <clipPath id="clip1">
        <polygon id="clip1Shape" points="-100,-100 0,-100 0,0 -100,-20" />        
      </clipPath>
    </defs>
    <circle id="" cx="0" cy="0" r="52" fill-opacity="0" 
                  stroke="#ffffff" stroke-opacity="0.6" stroke-width="50" 
                  pointer-events="visiblePainted" clip-path="url(#clip1)" />
  </g>
</svg>

我想做的是获取该块并将其克隆到另一个SVG根元素中，以创建一堆楔形，每个楔形具有不同的位置和剪贴段。这部分很酷，但令人沮丧的是，每个克隆的clipPath元素都需要接收一个新的ID，然后必须将其插入到匹配元素的clip-path属性中。

我知道如果所有弧长相等，我可以有一个公共剪辑并使用旋转变换，但它们的长度并不一定相等。

是否可以通过拓扑关系来声明剪辑多边形，而不是显式命名它？或者，除了使用路径之外，是否有更好的方法来定义这样的弧线？

谢谢。

- mikepurvis

---

好问题。我70%的确信你不能做你想做的事情，但这还不足以让我断言。我似乎记得在SVG邮件列表上讨论过这个问题，因为它也适用于其他领域（如<use>元素）；如果我在那里找不到它，也许你可以。或者，你可以编写一个强大的cloneSVG()函数来执行克隆，并通过附加用户指定变量使ID唯一，并了解所有可能引用ID的SVG属性，并更新这些属性。 - Phrogz

Answer 1

为什么需要使用剪辑？难道不能只是使用带有各种弧段的路径元素吗？

目前还没有声明性的方法可以获得您想要的行为，但这就是SVG参数规范旨在解决的问题。请查看那里的示例以及提供的用于处理内容的脚本实现（作为支持当前浏览器的一种方式）。注意：它仍然是一个工作草案，可能会发生变化。

- Erik Dahlström

---

另外，是否有更好的方式定义这样的弧线，而不是使用路径？ - Phrogz