разделение пути SVG на 3 части - PullRequest
Новая
       100

разделение пути SVG на 3 части

1 голос
/ 05 августа 2020

Я пытаюсь разбить этот SVG для дальнейшей анимации на 3 части: -mug -steam1 -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 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>

Ответы [ 2 ]

3 голосов
/ 05 августа 2020

Если бы это был я, я бы избавился от проблем с прочесыванием всех свойств координат и просто продублировал бы тот, который выглядит точным, а затем просто применил бы преобразование, как показано ниже. Надеюсь, это поможет, ура! 

<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 голосов
/ 05 августа 2020

Мое решение преобразует путь во все абсолютные (вы можете использовать этот преобразователь: https://codepen.io/leaverou/pen/RmwzKv), а затем разделить его командой «M». 

<svg viewBox="0 0 512 512" width="200">
<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>
...