将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即可实现。