Я ищу некоторые указатели на масштабирование контейнеров SVG, не затрагивая пути внутри. Я работаю с Greensock.js и хотел бы, чтобы контейнеры SVG масштабировались с шириной самих букв (без изменения соотношения сторон путей внутри). Конечная цель состоит в том, чтобы окружающие буквы перетасовывались с масштабируемой буквой. См. прикрепленный gif для ожидаемого результата.
См. Codepen, но вот как я настроил свой HTML:
<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>