path.setAttribute("d","M400 400 L400 300 A400 400 90 0 1 500 400 Z")
path.setAttribute("style","fill:nonestroke:#00fstroke-width:2")
svgdoc.rootElement.appendChild(path)
这个代码是画四分之一个圆，圆环你自己算下坐标，用PATH画，A是画弧线的
path的相关知识，你百度你里面看下，这里就不多说了
看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级HTML5插件jquery-drawsvg就可以实现了,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。该SVG路径动画插件的特点有:
轻量级,压缩后小于2kb
使用简单
支持Easing过渡动画效果
演示地址:http://www.htmleaf.com/Demo/201509112558.html
插件下载地址:http://down.htmleaf.com/1509/201509111546.zip
使用方法:
使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.drawsvg.js"></script>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。
首先将初始化的对象实例保存为一个变量:
var mySVG = $('#my_svg_element').drawsvg()
然后就可以执行动画效果了:
mySVG.drawsvg('animate')
配置参数
下面是该SVG路径动画创建的可用配置参数:
参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery
Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()
{}路径动画完成之后的回调函数
SVG元素是一种特殊的DOM元素，可以使用CSS以及一般的JS类库来实现动画控制。但是这些方法都没提供SVG动画样式属性的完整控制，现在介绍一个专门的SVG动画类库Snap.svg，其github地址为： https://github.com/adobe-webplatform/Snap.svg
Snap.svg提供多种安装方式。
功能描述： 创建或加载已有的SVG元素。
参数说明：
返回值： SVG元素
功能描述： 根据JS选择器加载SVG元素内已有的图形元素。
参数说明：
返回值： 选择器命中的元素Element，当存在多个命中的元素时，只返回第一个元素
功能描述： 在SVG元素内绘制一个圆。
参数说明：
返回值： 新建的circle元素Element
功能描述： 在SVG元素内绘制一条Path。
参数说明：
返回值： 新建的path元素Element
功能描述： 在SVG元素内绘制一个矩形。
参数说明：
返回值： 新建的rect元素Element
功能描述： 在一段时间内匀速变更相关属性到目标值。
参数说明：
返回值： 动画对象
功能描述： 根据设置的参数，执行动画操作。
参数说明：
返回值： mina格式的动画对象
功能描述： 执行位移操作。
参数说明：
功能描述： 使推行围绕指定的圆心，旋转一定角度。
参数说明：
初始化参考上面“基本实现步骤”中的相关描述，后续只描述动画控制部分。
《Snap.svg API文档》
《使用 Snap.svg 制作动画》
