将 svg 路径分成 3 部分
Posted
技术标签:
【中文标题】将 svg 路径分成 3 部分【英文标题】：splitting svg path into 3 pieces 【发布时间】：2020-11-25 21:37:05 【问题描述】：我正在尝试将此 svg 拆分为 3 部分，以便进一步制作动画： -杯 -蒸汽1 -蒸汽2 ，但找不到正确的路径。 之前的代码：
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="mug-hot" class="svg-inline--fa fa-mug-hot fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z"></path></svg>编写我尝试过的代码，但似乎 steam2 没有完成：
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="mug-hot" class="svg-inline--fa fa-mug-hot fa-w-16"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path class='steam1' fill="currentColor" d="
M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5
16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0
63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1z"/>
<path class='steam2' fill="currentColor" d=" m112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0
208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1z"/>
<path class='mug' fill="currentColor" d="M400 192H32c-17.7 0-32
14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5
0 48 21.5 48 48s-21.5 48-48 48z"/></svg>【问题讨论】：
【参考方案1】：如果是我，我会省去梳理所有坐标属性的麻烦，只复制看起来准确的那个，然后应用如下所示的变换。希望这会有所帮助，干杯！
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="mug-hot" class="svg-inline--fa fa-mug-hot fa-w-16"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path class='steam1' fill="#ff0000" d="
M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5
16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0
63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1z"/>
<path class='steam2' fill="#0000ff" transform="translate(120)" d="M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5
16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0
63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1z"/>
<path class='mug' fill="currentColor" d="M400 192H32c-17.7 0-32
14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5
0 48 21.5 48 48s-21.5 48-48 48z"/>
</svg>【讨论】：
【参考方案2】：我的解决方案是将路径转换为所有绝对路径（您可以使用此转换器：https://codepen.io/leaverou/pen/RmwzKv），然后通过“M”命令分割。
<svg viewBox="0 0 512 512" >
<path fill="green" d="M127.1,146.5C128.4,154.2,135.1,160,143.1,160H159.6C169.4,160,177.2,151.5,175.9,142C172.1,113.8,159.5,87.8,139.3,67.3C124.9,52.6,115.7,34,112.9,13.8C111.8,5.9,105,0,96.8,0H80.4C70.6,0,63,8.5,64.1,18C68,49.9,82.1,79.3,104.7,102.4C116.7,114.6,124.4,129.9,127.1,146.5Z"/>
<path fill="brown" d="M239.1,146.5C240.4,154.2,247.1,160,255.1,160H271.6C281.4,160,289.2,151.5,287.9,142C284.1,113.8,271.5,87.8,251.3,67.3C236.9,52.6,227.7,34,224.9,13.8C223.8,5.9,217,0,208.8,0H192.4C182.6,0,174.9,8.5,176.1,18C180,49.9,194.1,79.3,216.7,102.4C228.7,114.6,236.4,129.9,239.1,146.5Z"/>
<path fill="blue" d="M400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z"></path></svg>【讨论】：
以上是关于将 svg 路径分成 3 部分的主要内容，如果未能解决你的问题，请参考以下文章