前面的话
本文将详细介绍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实例
#Box{
height: 300px;
width: 300px;
background: hsl(20,40%,90%);
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),linear-gradient(90deg,#ab4 23px,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
}
Box">
以上这篇使用SVG基本操作API的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/36437.html