SVG: держать границу вдоль маски
я не могу понять, как я могу замаскировать SVG и держать границу вдоль маски, это возможно? если да, то как?
я знаю, что это не так, как работают маски, но было бы неплохо, если бы у кого-то была идея / обходной путь / что угодно, как этого достичь.
вычесть круг из прямоугольника в моей графической программе не вариант, так как вырезанная часть должна быть динамичной, чтобы ее можно было изменить и изменить. Если бы я объединил две фигуры в эскизе, у меня было бы много возможностей для создания SVG.
Вот пример: https://codepen.io/hergi/pen/KQERyg
Заранее спасибо:)
SVG:
<svg width="400px" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask-circle">
<rect width="100%" height="100%" fill="white"/>
<circle id="Oval" fill="#000" cx="300" cy="150" r="100"></circle>
</mask>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect stroke="#000" fill="indianred" stroke-width="10" x="5" y="5" width="290" height="290" mask="url(#mask-circle)"></rect>
</g>
</svg>