Question

我有一个包含2个符号的SVG精灵，第二个符号使用第一个符号。我需要把它分成精灵，因为我多次使用这些图标。

我的问题是我不能按照我需要的方式为对象制作动画，希望有人可以提供帮助。基本上它是一个带有图标的按钮，一旦我点击它，我改变了20％的比例+动画颜色过渡和笔画过渡到不同的颜色。目前我设法用jquery引用各种符号部分，我不认为它是正确的方式，因为我理解它假设是一个独立的对象。

基本上我需要按钮来缩放+转换颜色填充+转接颜色描边点击。

＆＃13;

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

＆＃13;

.st0 {
  fill: none;
  stroke: #0083ED;
  stroke-miterlimit: 5;
}

＆＃13;

<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     ---------------------------------  -->

＆＃13;

Answer 1

符号旨在预先定义，然后按原样重复使用。您无法定义符号并创建不同的实例。或者换句话说，你不能以不止一种方式重复使用同一个符号。

因此，如果您在页面上多次使用相同的符号，那么符号就不会是您想要的。

如果您放弃符号，那么您可以使用以下内容实现您想要的效果。

＆＃13;

$('#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"});

})

＆＃13;

.st0 {
  fill: none;
  stroke: #0083ED;
  stroke-miterlimit: 5;
}

＆＃13;

<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>

＆＃13;

Answer 2

谢谢Paul LeBeau !! 我的问题是我已将'class'属性放在我的图标'path'标签上。因此，我无法在创建后修改它们，当我删除“类”时，我能够在更高级别的标记上更改css。通过这种方式，我仍然可以使用sprite重用该图标，而无需重复代码。

所以回顾一下：如果我们需要修改图标中的特定路径，我们就不能将这种技术用于精灵。希望能帮助某人：）

$('#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精灵图标

2 个答案: