javascript动态创建 svg image 出错

createElementNS() 方法与 createElement() 方法相似，只是它创建的 Element 节点除了具有指定的名称外，还具有指定的命名空间。只有使用命名空间的 XML 文档才会使用该方法

$("body").append('<div class="xxx"><svg xmlns="" widht="111" height="222"></svg></div>')

SVG制作素描线动画举例

1）.首先画一条素描线，如图

version="1.1"

xmlns="http://www.w3.org/2000/svg"

viewBox = "0 0 200 100">

fill="none"

stroke = "#AAA"

stroke-width = "2"

d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"/>

       素描线的参数可以使用工具生成

2）.SVG实现素描的动画及原理

       stroke-dasharray = "100 10" stroke-dashoffset = "0"

       stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙，这里包含两个参数

      stroke-dashoffset定义了从那个位置开始渲染生成线段

3）.使用CSS3来实现素描动画效果

/*定义keyframe动画*/

/* 添加动画到path元素 */

.path{

stroke-dasharray: 265.07

stroke-dashoffset: 265.07

animation: dash 3s linear infinite

/* 支持chrome */

-webkit-animation: dash 3s linear infinite

}

@keyframes dash{

from{

stroke-dashoffset: 265.07/* 这里是svg图形中素描线长度，可以使用js获取 */

}

to{

stroke-dashoffset: 0

}

}

/* 支持chrome浏览器 */

@-webkit-keyframes dash{

from{

stroke-dashoffset: 265.07/* 这里是svg图形中素描线长度，可以使用js获取 */

}

to{

stroke-dashoffset: 0

}

}

4）.使用Javascript来调节动画效果的参数

/*定义相关Javascript*/

var current_frame, //定义当前帧

total_frames, //定义全部帧数

path, //定义svg中的唯一path元素

length, //定义path所生成的素描长度

handle//定义javascript动画句柄

path = document.getElementById('path'),

length = path.getTotalLength()

//定义初始化方法

var init = function(){

current_frame = 0

total_frames = 160

path.style.strokeDasharray = length + ' ' + length//定义dasharray

path.style.strokeDashoffset = length//定义dashoffset

handle = 0

}

//定义实际的动画绘制方法

var draw = function(){

var progress = current_frame/total_frames

if(progress>1){ //这里定义完成动画

window.cancelAnimationFrame(handle)

}else{//否则使用reqeuestAnimationFrame来生成动画

current_frame++

path.style.strokeDashoffset = Math.floor(length*(1 - progress))

handle = window.requestAnimationFrame(draw)

}

}

//定义一个重新运行方法

var rerun = function(){

init()

draw()

}

//页面加载即运行

rerun()

这里主要定义初始化方法和动画绘制的方法，window.requestAnimationFrame(draw)来生成动画。

2）.SVG实现素描的动画及原理

       stroke-dasharray = "100 10" stroke-dashoffset = "0"

       stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙，这里包含两个参数

       stroke-dashoffset定义了从那个位置开始渲染生成线段

2.SVG简介

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

3.SVG的特点

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

       SVG图像可通过文本编辑器来创建和修改

       SVG图像可被搜索、索引、脚本化或压缩

       SVG是可伸缩的SVG图像可在任何的分辨率下被高质量地打印

       SVG可在图像质量不下降的情况下被放大

34浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome以及 Safari支持内联SVG。Internet Explorer 8或更早版本，可通过安装Adobe SVG Viewer以支持SVG。

4 SVG标签   

SVG代码以元素开始，包括开启标签和关闭标签。这是根元素。width和height属性可设置此SVG文档的宽度和高度。version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间。

---