最近有需要进行svg的绘制，接触到了这个svg绘制插件
svg.js
基础绘制参考官网说明：
https://svgjs.com/docs/3.0/shape-elements/#svg-rect
以及svg基础绘制说明：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes
当然官网也有很多功能说的不太详细，比如：
看到一个
动画示例
，很是感兴趣，但没找到更多信息了
查了些资料：
这里其实是
根据我们所绘制的path路径，自动形成过渡动画
，
duration()方法内可执行回调，沿路径插点动画，
// use path to replicate movement
const path = draw.path("M200 100 H 250 H 100 L120 0 H 80");
const length = path.length();
rect.animate(5000, '<>').during(function(pos, morph, eased){
var p = path.pointAt(eased * length)
rect.center(p.x, p.y)
.loop(true, true) //第一个参数是否循环播放，第二个参数是接上反序播放
下载使用
从 中下载zip包并解压，在dist文件夹下找到编译好的js文件，通过以下方式使用
svg-text-animate.js 或 svg-text-animate.min.js
[removed][removed]
[removed][removed]
[removed]
const fontawesome = new SVGTextAnimate("YOUR FONT FILE");
[removed]
ES6 风格 svg-text-animate.modu
官方地址 https://svgjs.dev/docs/3.1/
资源版本:
@svgdotjs/svg.js v3.1.1 MIT BUILT: Fri Jun 25 2021 15:37:54 GMT+0200
@svgdotjs/svg.filter.js BUILT: Mon Oct 18 2021 15:55:55 GMT+0200
再走一步，走到img了，显示打印alert(1)但还没弹窗，很明显js把dom树阻塞了，js执行完毕，img才开始执行，意味着img标签逃不过js的过滤。下面是remove，把src属性移除掉，onerror属性向前移一位，然后索引因为没有下一位了，所以循环结束，onerror属性也就留了下来。关键的是去看img中的attributes，有两个属性，一个src，一个onerror，看上去像数组一样的一个东西，有索引0和索引1。可以很明显的看到，最外层的是svg0，除了外层，里面的是svg2和svg1。...
动画效果主要是css的animation属性：http://www.runoob.com/cssref/css3-pr-animation.html
即动画的暂停和继续是修改属性：
animation-play-state
而js中修改style属性的方法，可以参考这篇文章写的：
js外部样式和style属性的添加移除
文章中提到了修改的方法，即：
对于含有中划线的css属
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<circle cx="50" cy="50" r="15" fill="black" stroke="black" stroke-width="1">
</circle>
上面的例子是用SVG.js实现小圆球在圆环上位移变化的一个动画；参考bonsai例子动画实现。SVG.js实现动画还是比较方便的。废话不多说，上代码。
var draw = SVG().addTo('body').size(800, 600)
const centerX = 400,
centerY = 300,
circles = 140,
distance = 180,
radiusMin = 10,
radiusVar = 10;
const ..
svg文件：
<svg width="640" height="400" xmlns="http://www.w3.org/2000/svg" id="svgColumn">
<text x="200" y="20" font-siz...
用js动态改变animateMotion的path属性 要控制移动的元素只有第一次的时候可以滑动，我用的定时器模拟的后台推过来的数据(用于控制元素移动的坐标)但是只能在第一次的时候可以滑动，然后调试发现path的值也改变了但是就是没有效果，以下是写的demo 请大家指点一下，困扰好长时间了，谢谢。PS:代码看着不清楚的 也可以到svgDemo看效果，浏览器中可以看到源码`id="animateMo...
参考 MDN开发文档 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMILSMIL
As of Chrome 45.0, SMIL animations are deprecated in favor of CSS animations and Web animations.
Gecko 2.0
