对使用SVG Sprite图标的SVG对象进行动画处理 [英] Animate an SVG object that uses SVG sprite icon

问题描述

我有一个包含2个符号的SVG子画面， 第二个符号使用第一个. 我需要将其划分为精灵，因为我使用图标的次数要多于一次.

I have an SVG sprite that contains 2 symbols, the second symbol uses the first one. I need to separate this into sprites, because i use the icons more then once.

我的问题是我无法按照所需的方式对对象进行动画处理，希望有人能提供帮助. 基本上它是一个带有图标的按钮，一旦单击它，我就将缩放比例更改为20％，并为颜色过渡和笔触过渡设置为不同颜色的动画. 目前，我设法通过jquery引用了各种符号部分，但由于我理解它应该是一个独立的对象，因此我认为它的方法不正确.

my problem is that i cannot animate the object the way i need, hope that someone can help. Basically its a button with an icon, once i click it, i change the scale in 20% + animate the color transition and the stroke transition to different colors. Currently i managed to reference the various symbol parts with jquery, i dont think its the right way as i understand its suppose to be an independent object.

基本上我需要按钮缩放+过渡色填充+过渡色笔触 点击.

Basically i need the button to scale + transit color fill + transit color stroke on click.

$('#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     ---------------------------------  -->

推荐答案

打算对符号进行预定义，然后按原样重用.您无法定义符号并为其创建不同的实例.或者换一种说法，您不能以多种方式重设同一符号的样式.

Symbols are intended to be predefined then get reused as is. You can't define a symbol and create differing instances of it. Or to say it another way, you can't restyle the same symbol in more than one way.

因此，如果您可能在页面上多次使用同一符号，那么符号就不是您想要的.

So if you may be using the same symbol more than once on the page, then symbols won't be what you want.

如果您放弃了符号，则可以使用以下内容实现所需的功能.

If you forgo symbols, then you can achieve what you want using something like the following.

$('#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>

这篇关于对使用SVG Sprite图标的SVG对象进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！