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属性中。

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

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

感谢。

Answer 1

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

没有声明方式（尚未）获得您所追求的行为，但这是SVG Parameters规范要解决的问题。查看那里的示例以及为处理内容而提供的脚本实现（作为支持当前浏览器的一种方式）。注意：它仍然是工作草案，可能会有变化。

我可以在不指定剪辑路径ID的情况下在SVG中应用剪辑吗？

1 个答案: