我有一个包含2个符号的SVG精灵，第二个符号使用第一个符号。我需要将其分离为精灵，因为我使用图标的次数要多于一次。
我的问题是我无法按照所需的方式为对象设置动画，希望有人可以提供帮助。基本上它是一个带有图标的按钮，一旦单击它，我就将缩放比例更改为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 --------------------------------- -->旨在预定义符号，然后按原样重用它们。您无法定义符号并为其创建不同的实例。换句话说，您不能以多种方式重设同一符号的样式。
因此，如果您可能在页面上多次使用同一符号，那么符号就不是您想要的。
如果放弃符号，则可以使用以下内容来实现所需的功能。
$('#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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句