Javascript 将SVG的各个部分保持在固定大小

本质上，我需要使中心“切口”保持固定的形状和大小，而不考虑矢量比例。有没有办法做到这一点

---

因此，在对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>

我贴了一支笔作为“概念证明” 你可以随意用它来完成你想做的事情。

---

注：正如@thioutp所指出的，JS仅用于演示目的，您不需要GSAP来实现这一点。

每次调整整个图形的大小时，编写一些javascript来更改对象的大小。哇，真是太好了！聪明的解决方案，但您似乎正在使用自定义库？嗨@thiout\p，感谢您指出这一点。我使用的库仅用于演示目的。解决方案不需要它。这很好，因此请练习在嵌入式答案中发布整个代码，而不是链接。谢谢@Michael Mullany，我将尝试更频繁地在答案中集成我的代码。好主意。。但这只适用于css转换，不会对PreserveSpectratio=“none”造成任何影响，或者有没有办法只进行“#largeshape”缩放以适应其父级？