SVG 라인 애니메이션 연기 선박 연기가 커피 컵 <a href="https://i.stack.imgur.com/i6NG3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i6NG3.gif" alt="enter image description here"></a><br/> 나오는 예처럼 <br/> 나오는 어디 효과를 만들기 위해 노력하고

Question

작동하지 않습니다하지만 난 그것을 할 수 없습니다입니다.

SVG 코드는 다음과 같습니다 :

<?xml version="1.0" encoding="UTF-8"?> 
      <svg width="150px" height="127px" viewBox="0 0 150 127" version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink"> 
       <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch --> 
       <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
        <g id="Mobile-Portrait" transform="translate(-98.000000, -419.000000)" fill="#FFFFFF"> 
         <g id="food_loading" transform="translate(98.000000, 419.000000)"> 
          <path d="M139.06,95.2449167 C134.53,70.4159167 113.7925,50.6875833 87.3925,45.9089167 C87.435,45.5355833 87.5,45.1599167 87.5,44.7889167 C87.5,38.3559167 81.8925,33.12225 75,33.12225 C68.1075,33.12225 62.5,38.3559167 62.5,44.7889167 C62.5,45.1599167 62.5625,45.5355833 62.6075,45.9089167 C36.2075,50.6875833 15.47,70.4159167 10.94,95.2449167 C5.715,98.00525 0,102.067583 0,106.624583 C0,118.489583 38.78,126.457917 75,126.457917 C111.22,126.457917 150,118.489583 150,106.624583 C150,102.067583 144.285,98.00525 139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 L139.06,95.2449167 Z M67.515,45.1925833 C67.505,45.05725 67.5,44.9219167 67.5,44.79125 C67.5,40.9319167 70.865,37.79125 75,37.79125 C79.135,37.79125 82.5,40.9319167 82.5,44.79125 C82.5,44.92425 82.495,45.05725 82.485,45.1925833 C82.3675,45.1809167 82.25,45.17625 82.135,45.1645833 C81.275,45.0759167 80.41,45.0129167 79.54,44.9569167 C79.22,44.9359167 78.9025,44.9055833 78.5825,44.88925 C77.3975,44.8285833 76.205,44.7935833 75.0025,44.7935833 C73.8,44.7935833 72.6075,44.8285833 71.4225,44.88925 C71.1025,44.9055833 70.785,44.9359167 70.465,44.9569167 C69.595,45.0129167 68.73,45.07825 67.87,45.1645833 C67.75,45.17625 67.6325,45.1785833 67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 L67.515,45.1925833 Z M63.3625,59.9859167 C63.545,59.9859167 63.73,59.96725 63.915,59.9299167 C67.51,59.1739167 71.2275,58.79125 74.9675,58.79125 L75,58.79125 C76.38,58.79125 77.5,57.74825 77.5,56.46025 C77.5,55.1699167 76.3825,54.1245833 75,54.1245833 L74.965,54.1245833 C70.8575,54.1245833 66.77,54.5469167 62.815,55.3775833 C61.4675,55.6599167 60.6225,56.90825 60.925,58.1659167 C61.19,59.2509167 62.22,59.9859167 63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 L63.3625,59.9859167 Z M24.5525,98.41825 C24.705,98.44625 24.855,98.4579167 25.0025,98.4579167 C26.1875,98.4579167 27.24,97.66925 27.46,96.5445833 C30.0575,83.24925 38.6425,71.41925 50.425,64.9045833 C51.6125,64.2489167 52.005,62.81625 51.3025,61.7079167 C50.5975,60.5995833 49.065,60.23325 47.8775,60.8889167 C34.8675,68.0825833 25.3975,81.0979167 22.5425,95.7045833 C22.2925,96.9739167 23.1925,98.18725 24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 L24.5525,98.41825 Z M65.9975,50.0879167 C67.34,49.90125 68.69,49.7659167 70.045,49.66325 C70.3225,49.64225 70.6,49.6235833 70.8775,49.6049167 C73.6225,49.43225 76.38,49.43225 79.125,49.6049167 C79.4025,49.6235833 79.68,49.64225 79.9575,49.66325 C81.3125,49.7659167 82.6625,49.90125 84.005,50.0879167 C110.05,53.7629167 130.6475,73.1225833 134.385,97.4919167 C134.5,98.2409167 134.5925,98.99225 134.675,99.7435833 C134.7025,100.002583 134.74,100.25925 134.765,100.51825 C134.8625,101.551917 134.935,102.585583 134.97,103.61925 C95.695,112.114917 54.31,112.114917 15.035,103.61925 C15.0725,102.585583 15.1425,101.551917 15.24,100.51825 C15.265,100.25925 15.3,100.002583 15.33,99.7435833 C15.4125,98.9899167 15.505,98.2385833 15.62,97.4919167 C19.355,73.1225833 39.9525,53.7605833 65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 L65.9975,50.0879167 Z M75,121.79125 C32.26,121.79125 5,111.83025 5,106.624583 C5,105.730917 6.185,103.761583 10.16,101.192583 C10.15,101.325583 10.155,101.45625 10.145,101.58925 C10.06,102.867917 10,104.155917 10,105.457917 L10,107.296583 L11.9175,107.72825 C32.5525,112.34825 53.7775,114.662917 75,114.662917 C96.2225,114.662917 117.4475,112.350583 138.0825,107.72825 L140,107.296583 L140,105.457917 C140,104.155917 139.94,102.87025 139.855,101.58925 C139.845,101.45625 139.85,101.325583 139.84,101.192583 C143.815,103.761583 145,105.730917 145,106.624583 C145,111.83025 117.74,121.79125 75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 L75,121.79125 Z" 
            id="food"></path> 
          <path d="M73.375,27.77425 C73.8625,28.22925 74.5025,28.4579167 75.1425,28.4579167 C75.7825,28.4579167 76.4225,28.22925 76.91,27.77425 C77.8875,26.8619167 77.8875,25.38725 76.91,24.4749167 C74.3725,22.10425 74.3725,18.2495833 76.91,15.8789167 C79.085,13.8489167 80.285,11.1515833 80.285,8.28158333 C80.285,5.41158333 79.0875,2.71425 76.91,0.68425 C75.9325,-0.228083333 74.3525,-0.228083333 73.375,0.68425 C72.3975,1.59658333 72.3975,3.07125 73.375,3.98358333 C74.605,5.13158333 75.285,6.65758333 75.285,8.28158333 C75.285,9.90558333 74.6075,11.4315833 73.375,12.5795833 C68.8875,16.7679167 68.8875,23.5859167 73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 L73.375,27.77425 Z" 
            id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path> 
          <path d="M100.875,41.77425 C101.3625,42.22925 102.0025,42.4579167 102.6425,42.4579167 C103.2825,42.4579167 103.9225,42.22925 104.41,41.77425 C105.3875,40.8619167 105.3875,39.38725 104.41,38.4749167 C101.8725,36.10425 101.8725,32.2495833 104.41,29.8789167 C106.585,27.8489167 107.785,25.1515833 107.785,22.2815833 C107.785,19.4115833 106.5875,16.71425 104.41,14.68425 C103.4325,13.7719167 101.8525,13.7719167 100.875,14.68425 C99.8975,15.5965833 99.8975,17.07125 100.875,17.9835833 C102.105,19.1315833 102.785,20.6575833 102.785,22.2815833 C102.785,23.9055833 102.1075,25.4315833 100.875,26.5795833 C96.3875,30.7679167 96.3875,37.5859167 100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 L100.875,41.77425 Z" 
            id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path> 
          <path d="M45.875,41.77425 C46.3625,42.22925 47.0025,42.4579167 47.6425,42.4579167 C48.2825,42.4579167 48.9225,42.22925 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425 C48.4325,13.7719167 46.8525,13.7719167 45.875,14.68425 C44.8975,15.5965833 44.8975,17.07125 45.875,17.9835833 C47.105,19.1315833 47.785,20.6575833 47.785,22.2815833 C47.785,23.9055833 47.1075,25.4315833 45.875,26.5795833 C41.3875,30.7679167 41.3875,37.5859167 45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 Z" 
            id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="4"></path> 
         </g> 
        </g> 
       </g> 
      </svg> 

CSS는이 :
여기 내 시도를 보여주는 jsfiddle의

.food-path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: dash 1.5s linear alternate infinite; 
} 

@keyframes dash { 
    from { 
     stroke-dashoffset: 1000; 
    } 
    to { 
     stroke-dashoffset: 0; 
    } 
} 

Answer 1

사건은 제대로 뇌졸중 dasharray 및 stroke-에 대한 값을 조정하는 것입니다 대시 오프셋. JS로 그렇게 할 수 있습니다 - 실제 길이를 읽는 것은 아주 쉬운 방법입니다. stroke-dasharray를 사용하면 선의 렌더링 된 부분의 길이를 지정한 다음 간격의 길이를 지정할 수 있습니다. stroke-dashoffset을 사용하면 dasharray가 시작되는 위치를 변경할 수 있습니다.

일부 실험을 통해 JS 없이도 멋진 효과를 얻을 수 있습니다.

http://codepen.io/MakiBM/pen/NRaRWO 더 재사용 가능한 솔루션을

body { 
    background-color: lightgray; 
} 

svg { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

.food-path { 
    stroke-dasharray: 100; 
    stroke-dashoffset: 0; 
    animation: dash 3000ms linear infinite; 
} 

@keyframes dash { 
    from { 
     stroke-dashoffset: 200; 
    } 
    to { 
     stroke-dashoffset: 0; 
    } 
} 

링크를 참조하십시오 : 다음은 수정 된 버전으로 작업 할 수있는 대시 오프셋 선 그리기 해트트릭을 https://jakearchibald.com/2013/animated-line-drawing-svg/

Answer 2

을, 당신은 "라인이 필요합니다 "그냥 뇌졸중으로 이루어진. 스팀 라인은 실제로는 닫힌 모양으로, 경로가 선 바깥을 돌아 다니는 곳입니다. 따라서 원하는 증기 효과를 얻는 대신 증기선 바깥에서 움직이는 애니메이션 선을 얻으실 수 있습니다.

은 당신이 지금 가지고있는 것은 이것이다 :

.food-path { 
 
    stroke-dasharray: 69; 
 
    stroke-dashoffset: 69; 
 
    animation: dash 1.5s linear alternate infinite; 
 
} 
 

 
@keyframes dash { 
 
    from { 
 
     stroke-dashoffset: 69; 
 
    } 
 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
}

<svg width="400px" height="400px" viewBox="20 0 60 60"> 
 

 
    <path d="M45.875,41.77425 C46.3625,42.22925 47.0025,42.4579167 47.6425,42.4579167 C48.2825,42.4579167 48.9225,42.22925 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425 C48.4325,13.7719167 46.8525,13.7719167 45.875,14.68425 C44.8975,15.5965833 44.8975,17.07125 45.875,17.9835833 C47.105,19.1315833 47.785,20.6575833 47.785,22.2815833 C47.785,23.9055833 47.1075,25.4315833 45.875,26.5795833 C41.3875,30.7679167 41.3875,37.5859167 45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 L45.875,41.77425 Z" id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="1"></path> 
 

 
</svg>

먼저 당신이 구불 구불 한 라인 하나의 두께로 그 증기 라인을 편집기로 SVG를로드하고 다시 그릴 필요가있을 것이다. 당신이 당신의 그림에서 원하는 무엇

더 같이있다 :

.food-path { 
 
    stroke-dasharray: 31; 
 
    stroke-dashoffset: 31; 
 
    animation: dash 1s linear alternate infinite; 
 
} 
 

 
@keyframes dash { 
 
    from { 
 
     stroke-dashoffset: 31; 
 
    } 
 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
}

<svg width="400px" height="400px" viewBox="20 0 60 60"> 
 

 
    <path d="M 49.41,41.77425 C50.3875,40.8619167 50.3875,39.38725 49.41,38.4749167 C46.8725,36.10425 46.8725,32.2495833 49.41,29.8789167 C51.585,27.8489167 52.785,25.1515833 52.785,22.2815833 C52.785,19.4115833 51.5875,16.71425 49.41,14.68425" id="food-path" class="food-path" fill="#FFFFFF" stroke="#000000" stroke-width="1"></path> 
 

 
</svg>

둘째

가 작동하는 드로잉 효과를 얻기 위해, 당신은 오프셋 대시 배열과 대시에 대한 값을 사용할 필요가 줄의 길이에 해당하는 사용하고있는 "1000"은 사용하는 라인에 비해 너무 길다. 예제에서 사용하고있는 값을보십시오.