Crop svg circle object with rect object

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> 

Оба являются фигурами, импортированными из иллюстратора SVG. Но когда я помещаю круг в объект прямой, круг исчезает.

<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> 

Попытка избежать использования клипа, поскольку он не работает в IE. Любые идеи?

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

Благодаря

Answer 1

Вы не можете включать <circle> элемент внутри <rect> элемента. Это недопустимый SVG.

Пытается избежать использования клипа, поскольку он не работает в IE.

Я не уверен, что вы подразумеваете под этим. clipPaths отлично работают в IE.

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