<g>要素で作成されたパスで新しいsvgファイルをアニメーション化する方法

最近、私は非常に面白いチュートリアルをオンラインで読んだら、svgファイルをアニメーション化することができました：https://jakearchibald.com/2013/animated-line-drawing-svg/。<g>要素で作成されたパスで新しいsvgファイルをアニメーション化する方法

問題は今、別のタイプのsvgに切り替える必要があるということです。私は新しいバージョンを推測しています。

<?xml version="1.0" encoding="utf-8"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg class="snap" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="47.1 0.2 10.2 9.6" enable-background="new 47.1 0.2 10.2 9.6" xml:space="preserve"> 
    <path id="feat1" stroke="#8dc63f" stroke-width="0.3" stroke-dasharray="" stroke-dashoffset="0.00" fill="none" d="M52.6,9.8c-1.3,0-2.5-0.5-3.4-1.4c-1.9-1.9-1.9-4.9,0-6.8c0.9-0.9,2.1-1.4,3.4-1.4c1.3,0,2.5,0.5,3.4,1.4c1.9,1.9,1.9,4.9,0,6.8C55.1,9.3,53.9,9.8,52.6,9.8z M52.6,0.4c-1.2,0-2.4,0.5-3.2,1.3c-1.8,1.8-1.8,4.7,0,6.5c0.9,0.9,2,1.3,3.2,1.3s2.4-0.5,3.2-1.3l0,0c1.8-1.8,1.8-4.7,0-6.4C54.9,0.9,53.8,0.4,52.6,0.4z M51.4,6.5L51.4,6.5c-0.7-0.1-1.2-0.3-1.5-0.6c-0.6-0.7-0.4-1.9-0.2-2.9c0,0,0-0.1,0.1-0.1c0,0,0.1,0,0.1,0C51,3.4,51.7,4,51.9,4.7c0.2,0.5,0,1.1-0.4,1.8C51.5,6.5,51.4,6.5,51.4,6.5z M49.8,3.1c-0.2,1.1-0.2,2,0.2,2.6c0.3,0.3,0.7,0.5,1.2,0.6c0.3-0.6,0.5-1.1,0.3-1.5C51.5,4.2,50.9,3.7,49.8,3.1z M51.4,6.5c0.1,0,0.1-0.1,0.1-0.1c-0.2-1.2-0.8-2.1-1.2-2.6c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2c0.4,0.4,1,1.3,1.1,2.4C51.3,6.5,51.3,6.5,51.4,6.5C51.4,6.5,51.4,6.5,51.4,6.5z M53,7.4c0,0-0.1,0-0.1-0.1c-0.5-1-0.6-1.8-0.4-2.4c0.3-0.9,1.3-1.6,2.9-2.3c0,0,0.1,0,0.1,0c0,0,0.1,0.1,0.1,0.1c0.1,1.4,0.3,3-0.5,4C54.6,7.1,53.9,7.4,53,7.4L53,7.4z M55.3,2.9C53.8,3.5,53,4.2,52.7,5c-0.2,0.6-0.1,1.3,0.3,2.2c0.8,0,1.4-0.3,1.8-0.7C55.5,5.7,55.5,4.5,55.3,2.9z M53.1,7.3c0.3-1.5,1.1-2.7,1.7-3.3c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0c-0.6,0.6-1.5,1.8-1.8,3.4c0,0.1,0,0.1,0.1,0.2c0,0,0,0,0,0C53,7.4,53.1,7.4,53.1,7.3z" /> 
    </svg>

とJavaScriptは、私が追加したスニペット：

$('.snap').eq(0).one("mouseenter", function() { 
    var path = document.querySelector('.snap path'); 
    path.getTotalLength(); 

    var path = document.querySelector('.snap path'); 
    var length = path.getTotalLength(); 
    path.style.transition = path.style.WebkitTransition = 
    'none'; 
    path.style.strokeDasharray = length + ' ' + length; 
    path.style.strokeDashoffset = length; 
    path.getBoundingClientRect(); 
    path.style.transition = path.style.WebkitTransition = 
    'stroke-dashoffset 2s ease-in-out'; 
    path.style.strokeDashoffset = '0'; 
});

を私は複数のSVGファイルを使用していますので、私はeq(0)を使用していました。これまでのところ私のコードがある

しかし、今の問題は、私はこのようなファイルで作業しなければならないということです。

<?xml version="1.0" encoding="utf-8"?> 
    <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
    <svg class="snap" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
    <style type="text/css"> 
     .st0 { 
     fill: none; 
     stroke: #8DC63F; 
     stroke-width: 2; 
     stroke-linecap: round; 
     stroke-linejoin: round; 
     stroke-miterlimit: 10; 
     } 

    </style> 
    <g> 
     <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2988 53.1541)" class="st0" cx="53" cy="53.5" rx="38.1" ry="38.1" /> 
     <g> 
     <path class="st0" d="M30,37c-2,13.7-3.5,26.8,13.2,28C49.3,55,49.3,46.2,30,37z" /> 
     <path class="st0" d="M33.8,44.6C37,48,41.8,55.4,43.3,65" /> 
     <path class="st0" d="M76.4,34.8c1.8,18.9,2.9,36.9-20.2,37.4C48.7,58.1,49.3,46.1,76.4,34.8z" /> 
     <path class="st0" d="M70.7,45C66,49.4,58.9,59.3,56.2,72.2" /> 
     </g> 
    </g> 
    </svg>

私はパスを選択しようとしたが、効果は非常に最初のパスでのみ動作し、私はquerySelectorAllを使用しますが、エラー-> getTotalLength()が表示されます。だから私は<g>要素を選択することにしましたが、とにかく動作していません。

提案がありますか？

UPDATE：

私が原因のパフォーマンスの事実のためにオブジェクト要素にSVGのインライン要素に切り替えます。、

<div class=row> 
       <p class="col-md-4"> 
        <svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
        <style type="text/css"> 
         .st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
        </style> 
        <g> 
         <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2988 53.1541)" class="st0" cx="53" cy="53.5" rx="38.1" ry="38.1"/> 
         <g> 
          <path class="st0" d="M30,37c-2,13.7-3.5,26.8,13.2,28C49.3,55,49.3,46.2,30,37z"/> 
          <path class="st0" d="M33.8,44.6C37,48,41.8,55.4,43.3,65"/> 
          <path class="st0" d="M76.4,34.8c1.8,18.9,2.9,36.9-20.2,37.4C48.7,58.1,49.3,46.1,76.4,34.8z"/> 
          <path class="st0" d="M70.7,45C66,49.4,58.9,59.3,56.2,72.2"/> 
         </g> 
        </g> 
       </svg> 
       Organic</p> 
       <p class="col-md-4"> 
        <svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
        <style type="text/css"> 
         .st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
        </style> 
        <g> 

         <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.8051 53.0077)" class="st0" cx="53.1" cy="52.8" rx="38.1" ry="38.1"/> 
         <g> 
          <line class="st0" x1="47.3" y1="43.5" x2="53" y2="47.9"/> 
          <line class="st0" x1="50.8" y1="55.8" x2="57.8" y2="61.1"/> 
          <line class="st0" x1="39" y1="59.4" x2="43.3" y2="62.8"/> 
          <path class="st0" d="M65.2,43.2c9,2.7,10-3,9.8-4.1c-0.4-2.4-3.9-3.4-3.9-3.4c3.6-0.6,4-6.4,1.7-8.2c-2.3-1.8-7.9,0-7.5,3.7 
          c0,0-1.8-3.2-4.3-3c-1.1,0.1-6.4,2.5-1.5,10.5"/> 
          <line class="st0" x1="62.5" y1="40.7" x2="67" y2="34.9"/> 
          <path class="st0" d="M62.9,41.1c6.2,4.8,5.5,9.3,2.4,13.2c-3.1,4-19.6,18.9-28.7,23.1c-1.7,0.8-2.7,1.1-3.2,0.7 
          c-0.5-0.4-0.5-1.5-0.1-3.3c1.8-9.8,12.1-29.5,15.2-33.5c3.1-4,7.2-5.8,13.4-1L62.9,41.1z"/> 
         </g> 
        </g> 
       </svg> 
       Vegan</p> 
       <p class="col-md-4"> 
        <svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
        <style type="text/css"> 
         .st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
        </style> 
        <g> 

         <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2783 53.2037)" class="st0" cx="53.1" cy="53.5" rx="38.1" ry="38.1"/> 
         <polyline class="st0" points="32,48.8 32,35.8 41.6,48.8 41.6,35.8 "/> 
         <polyline class="st0" points="65.2,48.8 65.2,35.8 74.9,48.8 74.9,35.8 "/> 
         <polyline class="st0" points="58.2,69.7 58.2,56.7 52.8,64 47.5,56.7 47.5,69.7 "/> 
         <circle class="st0" cx="53.6" cy="42.3" r="6.5"/> 
         <circle class="st0" cx="70.7" cy="63.2" r="6.5"/> 
         <path class="st0" d="M41.1,58.2c-1.1-0.9-2.6-1.5-4.1-1.5c-3.6,0-6.5,2.9-6.5,6.5c0,3.6,2.9,6.5,6.5,6.5c1.6,0,3.1-0.6,4.3-1.6 
         v-4.6H37"/> 
        </g> 
       </svg> 
       Non-GMO</p> 
      </div> 
      <div class=row> 
       <p class="col-md-4"> 
        <svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
        <style type="text/css"> 
         .st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
        </style> 
        <g> 
         <g> 
          <polygon class="st0" points="44.6,59.7 30.3,56.9 28.8,39.7 43.1,42.5  "/> 
          <polygon class="st0" points="53.8,35.2 39.5,32.3 28.8,39.7 43.1,42.5  "/> 
          <polyline class="st0" points="51.5,55 44.6,59.7 43.1,42.5 53.8,35.2 55.1,49.6  "/> 
          <polygon class="st0" points="61.6,74.7 75.9,71.8 77.4,54.6 63.1,57.5  "/> 
          <polygon class="st0" points="52.4,50.1 66.7,47.3 77.4,54.6 63.1,57.5  "/> 
          <polygon class="st0" points="50.9,67.3 61.6,74.7 63.1,57.5 52.4,50.1  "/> 
         </g> 

         <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2783 53.2037)" class="st0" cx="53.1" cy="53.5" rx="38.1" ry="38.1"/> 
         <line class="st0" x1="42.3" y1="64.2" x2="26.1" y2="80.5"/> 
         <line class="st0" x1="80" y1="26.5" x2="63.1" y2="43.5"/> 
        </g> 
       </svg> 
       No-added-sugar</p> 
       <p class="col-md-4"> 
        <svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
        <style type="text/css"> 
         .st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
         .st1{fill:none;stroke:#8DC63F;stroke-width:2.1473;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
         .st2{fill:none;stroke:#8DC63F;stroke-width:2.3038;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
        </style> 
        <g> 
         <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.418 53.2791)" class="st0" cx="53.6" cy="52.5" rx="38.1" ry="38.1"/> 
         <line class="st0" x1="34.8" y1="71.3" x2="26.6" y2="79.5"/> 
         <line class="st0" x1="80.6" y1="25.5" x2="68.6" y2="37.5"/> 
         <g> 
          <path class="st0" d="M53.6,42.4c8.7-6.6,4-14.6,0-17.3C49.7,27.8,44.9,35.9,53.6,42.4z"/> 
          <path class="st0" d="M54.5,52.9c10.9-0.6,11.4-9.9,9.6-14.3C59.3,38.6,50.9,42.7,54.5,52.9z"/> 
          <path class="st1" d="M53.8,65.8c11.5-0.2,13.8-10.3,12.8-15.3C61.6,50.3,52,54.4,53.8,65.8z"/> 
          <path class="st2" d="M53.6,77.5c12.2,1.5,16.3-8.8,15.9-14.2C64.2,62.3,53.4,65.1,53.6,77.5z"/> 
          <path class="st0" d="M52.8,52.9c-10.9-0.6-11.4-9.9-9.6-14.3C47.9,38.6,56.3,42.7,52.8,52.9z"/> 
          <path class="st1" d="M53.4,65.8c-11.5-0.2-13.8-10.3-12.8-15.3C45.6,50.3,55.2,54.4,53.4,65.8z"/> 
          <path class="st2" d="M53.6,77.5C41.4,79,37.3,68.6,37.7,63.2C43,62.3,53.8,65.1,53.6,77.5z"/> 
         </g> 
        </g> 
       </svg> 
       Gluten-free</p> 
       <p class="col-md-4"> 
        <svg version="1.1" id="Layer_1" class="snap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
        <style type="text/css"> 
         .st0{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
        </style> 
        <g> 

         <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2783 53.2037)" class="st0" cx="53.1" cy="53.5" rx="38.1" ry="38.1"/> 
         <line class="st0" x1="39.8" y1="66.8" x2="26.1" y2="80.5"/> 
         <line class="st0" x1="80" y1="26.5" x2="66.2" y2="40.3"/> 
         <g> 
          <path class="st0" d="M66.4,56.3c1.8,1.5,3.2,3.4,4,5.7c2.6,7-1,14.8-8.1,17.4c-7,2.6-14.8-1-17.4-8.1c-0.9-2.4-1-5-0.6-7.4 
          l-0.1,0.4c0.4-2.3,0.2-4.7-0.6-7c-0.8-2.3-2.2-4.2-4-5.7l0.2,0.2c-1.9-1.5-3.4-3.5-4.3-6c-2.6-7,1-14.8,8.1-17.4s14.8,1,17.4,8.1 
          c0.9,2.4,1,4.9,0.6,7.3l0-0.3c-0.4,2.2-0.2,4.6,0.6,6.9C63.2,52.8,64.7,54.8,66.4,56.3L66.4,56.3z"/> 
          <path class="st0" d="M44.2,37.4c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
          <path class="st0" d="M49.3,59.8c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
          <path class="st0" d="M59.3,62.7c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
          <path class="st0" d="M50.2,68.9c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
          <path class="st0" d="M61.6,71.5c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
          <path class="st0" d="M50.8,42.4c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
          <path class="st0" d="M43.8,49.3c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
          <path class="st0" d="M53.7,51.1c0-1.1,0.7-2.1,1.7-2.5c1.1-0.4,2.2-0.1,2.9,0.7"/> 
         </g> 
        </g> 
       </svg> 
       Nut-free</p> 
      </div> 
     </div>

そして、私は実際に動作するコードを追加しましたが、私はいくつかのことを試してみました（jQueryのそれぞれの機能を持つすべての画像を反復することができませんでした。私はそのようなファイルのコードで今働いていますしかし、彼らは働かなかった）。私はpath要素とは異なる他の要素とやりとりすることができず、path要素に変換することもできませんでした。

これまでのところ、私のコードは次のとおりです。

$('.snap').eq(0).one("mouseenter", function() { 
     var path_all = document.querySelectorAll('.snap path'); 

     $.each(path_all, function(key, path) { 

      var length = path.getTotalLength(); 
      path.style.transition = path.style.WebkitTransition = 
      'none'; 
      path.style.strokeDasharray = length + ' ' + length; 
      path.style.strokeDashoffset = length; 
      path.getBoundingClientRect(); 
      path.style.transition = path.style.WebkitTransition = 
      'stroke-dashoffset 2s ease-in-out'; 
      path.style.strokeDashoffset = '0'; 

     }); 
    }); 
    $('.snap').eq(1).one("mouseenter", function() { 
     var path_all = document.querySelectorAll('.snap path'); 

     $.each(path_all, function(key, path) { 

      var length = path.getTotalLength(); 
      path.style.transition = path.style.WebkitTransition = 
      'none'; 
      path.style.strokeDasharray = length + ' ' + length; 
      path.style.strokeDashoffset = length; 
      path.getBoundingClientRect(); 
      path.style.transition = path.style.WebkitTransition = 
      'stroke-dashoffset 2s ease-in-out'; 
      path.style.strokeDashoffset = '0'; 

     }); 
    }); 
    $('.snap').eq(2).one("mouseenter", function() { 
     var path_all = document.querySelectorAll('.snap path'); 

     $.each(path_all, function(key, path) { 

      var length = path.getTotalLength(); 
      path.style.transition = path.style.WebkitTransition = 
      'none'; 
      path.style.strokeDasharray = length + ' ' + length; 
      path.style.strokeDashoffset = length; 
      path.getBoundingClientRect(); 
      path.style.transition = path.style.WebkitTransition = 
      'stroke-dashoffset 2s ease-in-out'; 
      path.style.strokeDashoffset = '0'; 

     }); 
    }); 
    $('.snap').eq(3).one("mouseenter", function() { 
     var path_all = document.querySelectorAll('.snap path'); 

     $.each(path_all, function(key, path) { 

      var length = path.getTotalLength(); 
      path.style.transition = path.style.WebkitTransition = 
      'none'; 
      path.style.strokeDasharray = length + ' ' + length; 
      path.style.strokeDashoffset = length; 
      path.getBoundingClientRect(); 
      path.style.transition = path.style.WebkitTransition = 
      'stroke-dashoffset 2s ease-in-out'; 
      path.style.strokeDashoffset = '0'; 

     }); 
    });

このテーマにアプローチする方法についての提案？

出典

2016-05-05 Marco Maffei

あなたはです。そこにはがあります。解決策はすべてdocument.querySelectorAllを使用し、すべてのパスをループすることです。デモは、以下を参照してください： - あなたのソリューションは素晴らしいですK. @alvin

$('.snap').eq(0).one("mouseenter", function() { 
 
    var path_all = document.querySelectorAll('.snap path'); 
 

 
    $.each(path_all, function(key, path) { 
 

 
    var length = path.getTotalLength(); 
 
    path.style.transition = path.style.WebkitTransition = 
 
    'none'; 
 
    path.style.strokeDasharray = length + ' ' + length; 
 
    path.style.strokeDashoffset = length; 
 
    path.getBoundingClientRect(); 
 
    path.style.transition = path.style.WebkitTransition = 
 
    'stroke-dashoffset 2s ease-in-out'; 
 
    path.style.strokeDashoffset = '0'; 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <svg width="214" height="214" class="snap" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 106.2 107" style="enable-background:new 0 0 106.2 107;" xml:space="preserve"> 
 
    <style type="text/css"> 
 
     .st0 { 
 
     fill: none; 
 
     stroke: #8DC63F; 
 
     stroke-width: 2; 
 
     stroke-linecap: round; 
 
     stroke-linejoin: round; 
 
     stroke-miterlimit: 10; 
 
     } 
 

 
    </style> 
 
    <g> 
 
     <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2988 53.1541)" class="st0" cx="53" cy="53.5" rx="38.1" ry="38.1" /> 
 
     <g> 
 
     <path class="st0" d="M30,37c-2,13.7-3.5,26.8,13.2,28C49.3,55,49.3,46.2,30,37z" /> 
 
     <path class="st0" d="M33.8,44.6C37,48,41.8,55.4,43.3,65" /> 
 
     <path class="st0" d="M76.4,34.8c1.8,18.9,2.9,36.9-20.2,37.4C48.7,58.1,49.3,46.1,76.4,34.8z" /> 
 
     <path class="st0" d="M70.7,45C66,49.4,58.9,59.3,56.2,72.2" /> 
 
     </g> 
 
    </g> 
 
    </svg>

出典

2016-05-05 17:18:38

ps： '

男よ、どうもありがとう！ –

唯一の問題は、このエフェクトを一連の画像に追加しようとしていたことです。私は私の答えの詳細を説明します： –

を、唯一の問題は、私は、画像の束にこの効果を追加しようとしていたということです。例えば

は、第2の画像のために、私はこのスニペットを追加しました：

$('.snap').eq(1).one("mouseenter", function() { 
     var path = document.querySelector('.snap path'); 
     path.getTotalLength(); 

     var path = document.querySelector('.snap path[id="feat2"]'); 
     var length = path.getTotalLength(); 
     path.style.transition = path.style.WebkitTransition = 
     'none'; 
     path.style.strokeDasharray = length + ' ' + length; 
     path.style.strokeDashoffset = length; 
     path.getBoundingClientRect(); 
     path.style.transition = path.style.WebkitTransition = 
     'stroke-dashoffset 2s ease-in-out'; 
     path.style.strokeDashoffset = '0'; 
    });

ので、画像の束に行うと、それはホバー上の各画像に対して発生させるための任意のオプションがありますか？

出典

2016-05-05 19:03:13

複数のインラインSVG画像を使用する場合は、 '$（ '。snap'）.hover（...）'を使ってパスをアニメートします。埋め込みSVGについては、私のコードを読んでください：http://stackoverflow.com/questions/25002310/best-practice-for-using-svg-images/25032941#25032941 - ホバーONCEで起動したい場合は、IDを記録してスキップしてくださいその後のホバーでのアニメーション。 –

ありがとうAlvin K. –

以下に述べるように、SVG + HTMLの構造は**重要**です。それがあなたを助けたら答えを受け入れ、あなたが他のところで立ち往生するとき、答えは_cough_だけ遠くの質問です。がんばろう。 –

<g>要素で作成されたパスで新しいsvgファイルをアニメーション化する方法

答えて

関連する問題