我正在寻找一些关于扩展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>
感谢您的回复,正如enxaneta建议我最终将所有路径放在一个SVG中并在那里使用它们。
我的最终答案是将它们分组,让我在字母和容器的各个部分使用事件监听器,同时将它们保存在同一个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>
假设您控制SVG,您需要以这样的方式重新制作每个SVG,以便您可以将svg高度/宽度和viewbox
转换为百分比。
一个例子是使用100px x 100px的画布重新制作svg。然后,如果将单位更改为%
或em
等相对度量,则路径上的点仍然是相对的,因为它们基于100。
这是一种痛苦,但它是我找到的最好的解决方案,用于扩展容器而不会弄乱路径。