在不影响路径的情况下缩放 SVG答案

【问题标题】：Scaling an SVG without affecting paths在不影响路径的情况下缩放 SVG
【发布时间】：2019-07-16 18:32:57
【问题描述】：

我正在寻找一些关于在不影响内部路径的情况下缩放 SVG 容器的方法。我正在使用 Greensock.js，并希望 SVG 容器能够随字母本身的宽度缩放（不改变内部路径的纵横比）。最终目标是周围的字母与缩放字母一起洗牌。预期结果见附件 gif。

Scaling Letters Codepen

查看 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>

【问题讨论】：

这让我头疼，但我认为你需要实现某种逐字母动画。我会亲自在 SMIL 中完成，但您可以使用 javascript。
我会将所有字母放在同一个 svg 元素中。您可以将每个字母相对于前一组的边界框放置。另一个解决方案是使用 svg 湍流过滤器。

标签： html css animation svg gsap

【解决方案1】：

感谢您的回复，正如 enxaneta 建议的那样，我最终将所有路径放在一个 SVG 中并在那里使用它们。

我的最终答案是将它们分组，这样我就可以在字母的各个部分及其容器上使用 EventListener，同时将它们保持在同一个 viewBox 中。

这是我的 Codepen 解决方案： https://codepen.io/leecranny/full/MLdBra

<div class="leah">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 982 408" height="400">
    <g class="hbox">
        <rect  x="797.125" width="53.55" height="408" />
        <rect id="h_middle" x="806.05" y="104.55" width="158.1" height="53.55" />
        <rect id="h_side" x="928.45" width="53.55" height="408" />
    </g>
    <g class="abox">
        <path id="a_short" d="M750.75169,405.5H698.34861V106.05385c0-29.082-18.01843-53.65077-39.34861-53.65077s-39.34861,24.56881-39.34861,53.65077V405.5H567.24831V106.05385C567.24831,47.57558,608.40754,0,659,0s91.75169,47.57558,91.75169,106.05385Z" transform="translate(0 1)"/>
        <path id="a_wide" d="M821.75169,405.5H769.34861V146.05385C769.34861,87,716,52.40308,659,52.40308S549.65139,91,549.65139,146.05385V405.5H497.24831V136.05385C497.24831,61,568,0,659,0S821.75169,55,821.75169,136.05385Z" transform="translate(0 1)"/>
        <rect id="a_middle" x="590.37692" y="299.5908" width="137.24615" height="52.40308"/>
    </g>
    <g class="ebox">
        <rect id="e_inner" x="243.03125" y="248" width="240" height="53" />
        <rect id="e_outer" x="243.03125" y="354" width="278" height="53" />
        <rect id="e_outer" x="243.03125" y="1" width="278" height="53" />
        <rect id="e_left" x="197.03125" y="1" width="54" height="406" />
    </g>
    <g class="lbox">
        <rect id="l_short" x="46" y="354" width="105" height="53" />
        <rect id="l_left" y="1" width="54" height="406" />
    </g>
</svg>

【讨论】：

【解决方案2】：

假设您控制 SVG，您需要重新制作每个 SVG，以便您可以将 svg 高度/宽度和 viewbox 转换为百分比。

一个例子是使用 100px x 100px 的画布重新制作 svg。然后，如果您将单位更改为像 % 或 em 这样的相对度量，路径上的点仍然是相对的，因为它们基于 100。

这有点痛苦，但它是我找到的最好的解决方案，可以在不弄乱路径的情况下扩展容器。

这里有一些additional details with examples。

【讨论】：