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>

0 ответов

Другие вопросы по тегам