動畫使用SVG sprite圖標的SVG對象

Question

我有一個包含2個符號的SVG sprite， 第二個符號使用第一個符號。 我需要將它分離成精靈，因爲我多次使用圖標。

我的問題是，我不能以我需要的方式爲對象設置動畫，希望有人可以提供幫助。 基本上它帶有一個圖標的按鈕，一旦我點擊它，我改變了20％的比例+爲不同顏色的顏色過渡和筆觸過渡設置了動畫效果。 目前我設法引用jQuery的各種符號部分，我不認爲它正確的方式，因爲我明白它假設是一個獨立的對象。

基本上我需要點擊按鈕來縮放+運輸顏色填充+運輸顏色筆劃 。

$('#shape2').on('click', function(a, v, b) { 
 

 
    $(this).velocity({ 
 
    scale: 0.99, 
 
    duration: 100, 
 
    complete: function() { 
 
     $(this).velocity({ 
 
     scale: 1.4 
 
     }, { 
 
     duration: 1000 
 
     }); 
 
     //i don't want to do this, i want to access it as an object (this), but i cannot 
 
     $("#icon_2").find('circle').velocity({ 
 
     fill: '#00b2ff', 
 
     duration: 1000, 
 
     complete: function() { 
 
      $("#icon_1").find("path").velocity({ 
 
      stroke: "#fff", 
 
      queue: false 
 
      }, 1000); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
})

.st0 { 
 
    fill: none; 
 
    stroke: #0083ED; 
 
    stroke-miterlimit: 5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script> 
 
<svg width="0" height="0"> 
 
    <defs> 
 
    <symbol id="icon_1" viewBox="0 0 50 50" class="st0"> 
 
     <path d="M10.6 29.3h14.5V44H10.6z" /> 
 
     <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" /> 
 
    </symbol> 
 
    <symbol id="icon_2"> 
 
     <circle cx="50" cy="50" r="48" fill="#dcf2f8" stroke="white" stroke-width="2" /> 
 
     <use x="7" y="5" width="80" height="80" xlink:href="#icon_1"></use> 
 
    </symbol> 
 
    </defs> 
 
</svg> 
 

 

 
<!--    s  v   g  --------------------------------- --> 
 

 

 
<svg width='100' height='100' id="shape2"> 
 
    <use xlink:href="#icon_2"></use> 
 
</svg> 
 
<!--    s  v   g  --------------------------------- -->

Answer 1

符號旨在預先定義，然後得到重用原樣。您無法定義符號並創建不同的實例。或者換一種說法，你不能以多種方式重新設置相同的符號。

因此，如果您可能在頁面上多次使用相同的符號，那麼符號將不會是您想要的。

如果你放棄符號，那麼你可以使用類似下面的東西來實現你想要的。

$('#shape2').on('click', function(a, v, b) { 
 

 
    $this = $(this); 
 
    // Animate the SVG's size. Since it has a viewBox, everything inside gets scaled too 
 
    $this.velocity({scale: 1.4, duration: 1000}); 
 
    // Animate the icon colours 
 
    $this.find("circle").velocity({fill: '#00b2ff'}); 
 
    $this.find(".st0").velocity({stroke: "#fff"}); 
 

 
})

.st0 { 
 
    fill: none; 
 
    stroke: #0083ED; 
 
    stroke-miterlimit: 5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script> 
 

 
<svg width='100' height='100' id="shape2" viewBox="0 0 50 50"> 
 
    <circle cx="25" cy="25" r="24" fill="#dcf2f8" stroke="white" stroke-width="2" /> 
 
    <g class="st0" transform="translate(3.5, 2.5) scale(0.8)"> 
 
    <path d="M10.6 29.3h14.5V44H10.6z" /> 
 
    <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" /> 
 
    </g> 
 
</svg>

Answer 2

感謝Paul LeBeau！ 我的問題是，我已將'class'屬性放在我的圖標「路徑」標記上。 因爲我無法在創建後修改它們，所以當我刪除'class'時，我可以更改更高級別標記上的css。 通過這種方式，我仍然可以重複使用帶有子畫面的圖標，而無需複製代碼。所以要回顧一下：如果我們需要修改圖標內部的特定路徑，我們不能將這種技術用於精靈。 希望幫助別人:)

$('#shape2').on('click', function(a, v, b) { 
 

 
    $this = $(this); 
 
    // Animate the SVG's size. Since it has a viewBox, everything inside gets scaled too 
 
    $this.velocity({ 
 
    scale: 1.4, 
 
    duration: 1000 
 
    }); 
 
    // Animate the icon colours 
 
    $this.find("circle").velocity({ 
 
    fill: '#00b2ff' 
 
    }); 
 
    $this.find(".st0").velocity({ 
 
    stroke: "#fff" 
 
    }); 
 

 

 
});

.st0 { 
 
    fill: none; 
 
    stroke: #0083ED; 
 
    stroke-miterlimit: 5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script> 
 

 

 
<svg style="display:none;"> 
 
    <symbol id="icon_1" viewBox="0 0 54 54"> 
 
    <path d="M10.6 29.3h14.5V44H10.6z" /> 
 
    <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" /> 
 
    </symbol> 
 
</svg> 
 

 
<svg width='100' height='100' id="shape2" viewBox="0 0 50 50"> 
 
    <circle cx="25" cy="25" r="24" fill="#dcf2f8" stroke="white" stroke-width="2" /> 
 
    <g class="st0" transform="translate(3.5, 2.5) scale(0.8)"> 
 
    <use xlink:href="#icon_1"></use> 
 
    </g> 
 
</svg>