在我的标记中,我有一个类似于这样的块:
<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属性中。我知道如果所有弧长相等,我可以有一个公共剪辑并使用旋转变换,但它们的长度并不一定相等。
是否可以通过拓扑关系来声明剪辑多边形,而不是显式命名它?或者,除了使用路径之外,是否有更好的方法来定义这样的弧线?
谢谢。
<use>
元素);如果我在那里找不到它,也许你可以。或者,你可以编写一个强大的cloneSVG()
函数来执行克隆,并通过附加用户指定变量使ID唯一,并了解所有可能引用ID的SVG属性,并更新这些属性。 - Phrogz