使用rect对象裁剪svg circle对象

时间:2016-06-02 21:47:46

标签: svg crop geometry shapes rect

尝试在矩形框内裁剪圆形对象。

<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 SVG导入的形状。 但是当我把圆圈放在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/

由于

1 个答案:

答案 0 :(得分:0)

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

  

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

我不确定你的意思。 clipPaths在IE中运行良好。

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