Анимировать объект SVG, который использует значок спрайта SVG

Question

У меня есть спрайт SVG, который содержит 2 символа, второй символ использует первый. Мне нужно разделить это на спрайты, потому что я использую значки более одного раза.

моя проблема в том, что я не могу анимировать объект так, как мне нужно, надеюсь, что кто-то может помочь. В основном его кнопка со значком, как только я нажимаю на нее, меняю масштаб на 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» в тег «path» моего значка. Из-за этого я не смог изменить их после создания, когда я удалил «класс», я смог изменить 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>