动画使用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>