Хранение частей SVG в фиксированном размере

Question

По сути, мне нужно было сделать так, чтобы центральный «вырез» сохранял фиксированную форму и размер независимо от масштаба вектора.Есть ли способ добиться этого?

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" style="fill-rule:evenodd;" viewBox="0 0 2802 2657">
	<path d="M290 4c-95,733 -191,1466 -286,2200 760,150 1520,300 2279,450 172,-223 343,-446 515,-669 -114,-572 -229,-1144 -343,-1716 -722,-88 -1444,-176 -2165,-264zm696 1027c-103,111 -205,222 -308,333 94,111 188,222 282,333 342,-205 684,-410 1026,-616 -333,-17 -667,-34 -1000,-51z"/>
</svg>

Answer 1

Итак, мне удалось что-то сделать после некоторого редактирования вашего SVG.

Чтобы добиться того, что вы просите, вам нужно использовать / иметь: - атрибут маски SVG - очень большую фигуру длямаска (настолько большая, насколько максимальный масштаб вы хотите использовать для видимой фигуры) - фигура, которую вы хотите изменить, - изменить размер фигуры с помощью преобразований

Ваш SVG должен выглядеть следующим образом

<svg>
    <defs>
       <mask id="theMask">
          <path fill="#ffffff" d=""/>
       </mask>
    </defs>
    <g mask="url(#theMask)">
        <path fill="#ffffff" id="shapetoresize" d=""/>
    </g>
</svg>

Я разместил ручку в качестве «Доказательства концепции». Не стесняйтесь раскошелиться и использовать ее для достижения того, что вы пытаетесь сделать. Codepen

примечание: как указано @thioutp, JS предназначен только для демонстрационных целей, для этого вам не нужен GSAP.