我正在寻求有关在不影响内部路径的情况下缩放SVG容器的指导。我正在使用Greensock.js,并希望SVG容器与字母本身的宽度一起缩放(而不改变内部路径的纵横比)。最终目标是周围的字母会随着缩放的字母一起移动。请参见附带的gif以获取预期结果。
Scaling Letters Codepen
请查看Codepen,但以下是我如何设置HTML的方式:
![Final_Result](https://istack.dev59.com/pgRP8.gif)
<div class="letters">
<svg class="lcontainer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 406">
<rect class="bottom" x="46" y="353" width="278" height="53" />
<rect width="53" height="406" />
</svg>
<svg class="econtainer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 406">
<rect class="outer" x="46" width="278" height="53" />
<rect class="inner" x="46" y="247" width="240" height="53" />
<rect class="outer" x="46" y="353" width="278" height="53" />
<rect width="54" height="406" />
</svg>
</div>