我可以在不指定剪辑路径 ID 的情况下在 SVG 中应用剪辑吗？
在我的标记中，我有一个像这样的块：
<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属性中。
我知道，如果所有弧的长度相同，我可以有一个公共剪辑并使用旋转变换，但它们的长度不一定相同。
是否可以使用拓扑关系而不是显式命名来声明剪辑多边形？或者，除了使用路径之外，还有更好的方法来定义这样的弧吗？
谢谢。
In my markup, I have a chunk like this:
<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>
What I'm wanting to do is grab that chunk and clone it into a different svg root element to create a bunch of wedges, each with a different position and clip segment. That part is cool, but the frustration is that each cloned clipPath element will need to receive a new ID which will then have to be inserted into the clip-path attribute of the matching element.
I know that if all the arcs were the same length, I could have a common clip and use rotate transforms, but they aren't necessarily the same length.
Is it possible to declare a clip polygon using a topological relationship rather than by explicitly naming it? Alternatively, is there a better way to define an arc like this outside of using paths?
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为什么需要使用剪辑？难道不能只使用带有各种弧段的路径元素吗？
目前还没有声明性的方式来获得您想要的行为，但这就是 SVG 参数 规范是为了解决。查看那里的示例以及为处理内容提供的脚本实现（作为支持当前浏览器的一种方式）。注意：它仍然是一个工作草案，可能会发生变化。
Why do you need to use clipping? Couldn't you just use path elements with the various arc segments in them?
There's no declarative way (yet) to get the behaviour you are after, but this is what the SVG Parameters specification is meant to address. Look at the examples there and the script implementation provided for processing the content (as a way to support the current browsers). NOTE: it's still a working draft, and is subject to change.