动画自定义矢量形状

Question

我想为下面的矢量形状设置动画，遗憾的是由于边缘将其转换为路径是不可能的。 （如果有人知道将形状保存为路径的方法，那就值得称赞！）

目标是拥有一个遵循形状的动画：

我正在玩SVG动画，但似乎无法为形状设置动画。路径动画是可能的。我的问题是，是否可以使用附加小提琴中的<canvas>元素并在其中制作动画？

http://jsfiddle.net/Na6X5/

Answer 1

我在Illustrator中重新创建了形状，所以它并不完美，但它非常接近。然后我将其保存为SVG路径。

这是执行我认为你想要的工作代码。

SVG形状：

<?xml version="1.0" encoding="utf-8"?>
<svg id="myshape" version="1.1" id="Layer_1" xmlns="http://www.w3.org  /2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 571.1 437.5" style="enable-background:new 0 0 571.1 437.5;" xml:space="preserve" stroke="#000" stroke-width="90" stroke-miterlimit="10">
<g>
  <path id="mypath" d="M519,300.4l-76.4,75.9c-14,13.9-36.7,13.9-50.7-0.1l-83.5-83.5c-13.2-13.2-34.6-13.3-48-0.2
    l-93.9,92.1c-11.2,11-29.4,10.4-39.9-1.4l-73.5-82.6c-11.4-12.8-10.8-32.2,1.3-44.3L255.7,55.5c14-14,36.6-14,50.7-0.1l212.5,210.7
    C528.5,275.6,528.5,291,519,300.4z" />
</g>
</svg>

的JavaScript

drawTime = 2000; //2 seconds
path = document.getElementById("mypath");
length = path.getTotalLength();
path.style.strokeDashoffset = length; //starting position
path.style.strokeDasharray = length + ', ' + length;
path.style.fill = "none"; //make it have no fill to begin with
path.style.transition = path.style.WebkitTransition = 'none';
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + (drawTime / 1000) + 's ease-in-out';
path.style.strokeDashoffset = '0'; //finishing position

JSFiddle（纯JavaScript）：https://jsfiddle.net/900nayr2/4/

JSFiddle（我写的jQuery插件）：https://jsfiddle.net/vL5bz5mn/1/

对于jQuery one ...我大约一年前为jQuery 1.10或类似的东西编写了DrawSVG插件。我希望这有帮助！如果你愿意，你可以使用JavaScript。