svg java api_使用SVG基本操作API的实例讲解

导读热词

前面的话

本文将详细介绍SVG基本操作API，并使用这些API制作实例效果

基础API

在javascript中，可以使用一些基本的API来对SVG进行操作

【NS地址】

因为SVG定义在其自身的命令空间下，而不是HTML的命名空间下，可以作为单独的XML文件存在。所以需要使用自身的NS地址

有两个常用的NS地址

【创建图形】

【添加图形】

【设置/获取属性】

【设置xlink】

封装函数

将创建标签及添加属性的操作封闭成一个函数，方便复用

下面通过该函数，创建一个圆形

function createTag(tag,objAttr[attr]);

}

}

return oTag;

}

var oSvg = createTag('svg',{'version':'1.1','xmls':'http://www.w3.org/2000/svg',height:'70'});

var oCircle = createTag('circle',{'cx':'25','cy':'25','r':20,'fill':'pink'});

oSvg.appendChild(oCircle);

document.body.appendChild(oSvg);

实例

下面通过SVG基本操作API，创建一个可交互的SVG实例