使用矩形对象裁剪svg圆对象

Question

正在尝试裁剪矩形框中的圆对象。

<rect class="cls-2" x="36.21" y="74.47" width="237.17" height="123.78"></rect>
<circle class="cls-3" data-name="effector" class="cls-4" cx="234.79" cy="137.14" r="31.81"></circle>

两者都是从illustrator SVGs导入的形状。但是当我把这个圆放在rect对象中时，这个圆就消失了。

<rect class="cls-2" x="36.21" y="74.47" width="237.17" height="123.78">
<circle class="cls-3" data-name="effector" class="cls-4" cx="234.79" cy="137.14" r="31.81"></circle>
</rect>

尽量避免使用clipPath，因为它在IE中不起作用。有什么想法吗？

https://jsfiddle.net/phantomboogie/cya2r55e/

谢谢

Answer 1

不能在<rect>元素中包含<circle>元素。这是无效的SVG。

尝试避免使用clipPath，因为它在IE中不起作用。

我不知道你这么说是什么意思。clipPaths在IE中工作正常。

https://jsfiddle.net/cya2r55e/2/