为使用 SVG 精灵图标的 SVG 对象设置动画

Question

我有一个包含 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     ---------------------------------  -->

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！！我的问题是我在我的图标 'path' 标签上放置了 '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>

为使用 SVG 精灵图标的 SVG 对象设置动画

Animate an SVG object that uses SVG sprite icon

svg

velocity.js