Question

我正在构建一个SVG精灵，如下所示：

<body>
    <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <symbol id="icon-arrow-down" viewBox="0 0 1024 1024">
      <title>arrow-down</title>
      <path class="path1" d="M715.215 393.582l-204.117 204.166-206.141-206.092c-9.533-9.533-24.942-9.533-34.475 0s-9.533 24.966 0 34.475l223.378 223.33c4.584 4.584 10.776 7.144 17.237 7.144s12.678-2.56 17.237-7.144l221.355-221.403c9.533-9.533 9.533-24.966 0-34.475-9.533-9.533-24.942-9.533-34.475 0z"></path>
      <path class="path2" d="M512 0c-282.331 0-512 229.669-512 512s229.669 512 512 512c282.307 0 512-229.693 512-512s-229.693-512-512-512zM512 975.238c-255.439 0-463.238-207.799-463.238-463.238s207.799-463.238 463.238-463.238 463.238 207.799 463.238 463.238c0 255.439-207.799 463.238-463.238 463.238z"></path>
    </symbol>
    </defs>
    </svg>



      <div class="arrow-down arrow-wrap">
                     <svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>
                </div>

我想要做的是为路径设置动画，例如将三角形变成正方形。我想它必须用Snap.svg完成，但究竟是怎么做的？

Answer 1

您只需使用<animate>为d属性设置动画，并使用路径必须匹配的限制，直到曲线和线条为止。因此，例如，如果原始路径是一条线后跟一条曲线和两条线，则您的动画必须设置相同的动画，但您可以更改每条线的坐标。这可能有点棘手，具体取决于您尝试变形的形状，可能需要使用曲线但提供实际使其成为直线的值等等。

例如，通过仅更改动画中的第一行M和前两行，您可以获得以下结果：

http://jsfiddle.net/hp7ncyy2/1/

<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-arrow-down" viewBox="0 0 1024 1024">
            <title>arrow-down</title>
            <path class="path1">
                <animate attributeName="d" dur="2s" repeatCount="indefinite" values="
                        M715.215 393.582l-204.117 204.166-206.141-206.092c-9.533-9.533-24.942-9.533-34.475 0s-9.533 24.966 0 34.475l223.378 223.33c4.584 4.584 10.776 7.144 17.237 7.144s12.678-2.56 17.237-7.144l221.355-221.403c9.533-9.533 9.533-24.966 0-34.475-9.533-9.533-24.942-9.533-34.475 0z;
                        M715.215 493.582l-204.117 -204.166-206.141 206.092c-9.533-9.533-24.942-9.533-34.475 0s-9.533 24.966 0 34.475l223.378 223.33c4.584 4.584 10.776 7.144 17.237 7.144s12.678-2.56 17.237-7.144l221.355-221.403c9.533-9.533 9.533-24.966 0-34.475-9.533-9.533-24.942-9.533-34.475 0z;
                        M715.215 393.582l-204.117 204.166-206.141-206.092c-9.533-9.533-24.942-9.533-34.475 0s-9.533 24.966 0 34.475l223.378 223.33c4.584 4.584 10.776 7.144 17.237 7.144s12.678-2.56 17.237-7.144l221.355-221.403c9.533-9.533 9.533-24.966 0-34.475-9.533-9.533-24.942-9.533-34.475 0z" />
            </path>
            <path class="path2" d="M512 0c-282.331 0-512 229.669-512 512s229.669 512 512 512c282.307 0 512-229.693 512-512s-229.693-512-512-512zM512 975.238c-255.439 0-463.238-207.799-463.238-463.238s207.799-463.238 463.238-463.238 463.238 207.799 463.238 463.238c0 255.439-207.799 463.238-463.238 463.238z"></path>
        </symbol>
    </defs>
</svg>
<div class="arrow-down arrow-wrap">
    <svg class="icon icon-arrow-down">
        <use xlink:href="#icon-arrow-down"></use>
    </svg>
</div>

这显然不是一个完美的广场，但你得到了基本的想法。您需要操纵路径以获得所需的确切形状。

如果更改路径中的命令数量或类型，动画就会在没有动画的情况下来回跳转。

从SVG精灵轻松添加悬停动画到SVG

1 个答案: