动画自定义矢量形状答案

【问题标题】：Animate custom vector shape动画自定义矢量形状
【发布时间】：2017-08-22 22:19:41
【问题描述】：

我想为以下矢量形状设置动画，不幸的是，由于边缘无法将其转换为路径。（如果有人知道将形状保留为路径的方法，那就赞一个！）

我们的目标是制作一个跟随形状的动画：

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

http://jsfiddle.net/Na6X5/

【问题讨论】：

为什么不能将形状转换为 SVG 路径？要回答你的问题，是的......你可以在画布上制作它。
只是大声思考......用白色笔触颜色的路径覆盖您的形状并为其设置动画怎么样？
@jcaron 由于角度不同（圆形/方形），无法进行转换将其放入
其实@FirstLegion 说的很对，stroke-linejoin="round" 的路径会和你的图片一模一样...
jsfiddle.net/vbebd1xd

标签： javascript jquery animation canvas svg

【解决方案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... 我大约一年前为 jQuery 1.10 或类似的东西编写了 DrawSVG 插件。我希望这有帮助！如果你愿意，你可以只使用 JavaScript。

【讨论】：

谢谢，这太棒了！
别担心，如果你想移动形状的起始位置，请告诉我。这与 SVG 的坐标有关。