這篇文章主要介紹如何使用SVG基本操作API，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司，是成都地區(qū)的互聯(lián)網(wǎng)解決方案提供商，用心服務(wù)為企業(yè)提供網(wǎng)站建設(shè)、成都app軟件開(kāi)發(fā)、成都微信小程序、系統(tǒng)定制制作和微信代運(yùn)營(yíng)服務(wù)。經(jīng)過(guò)數(shù)10余年的沉淀與積累，沉淀的是技術(shù)和服務(wù)，讓客戶少走彎路，踏實(shí)做事，誠(chéng)實(shí)做人，用情服務(wù)，致力做一個(gè)負(fù)責(zé)任、受尊敬的企業(yè)。對(duì)客戶負(fù)責(zé)，就是對(duì)自己負(fù)責(zé)，對(duì)企業(yè)負(fù)責(zé)。

基礎(chǔ)API

在javascript中，可以使用一些基本的API來(lái)對(duì)SVG進(jìn)行操作

【NS地址】

因?yàn)镾VG定義在其自身的命令空間下，而不是HTML的命名空間下，可以作為單獨(dú)的XML文件存在。所以需要使用自身的NS地址

有兩個(gè)常用的NS地址

var SVG_NS = "http://www.w3.org/2000/svg";
var XLINK_NS = http://www.w3.org/1999/xlink;

【創(chuàng)建圖形】

document.createElementNS(SVG_NS,tagName);

【添加圖形】

element.appendChild(childElement)

【設(shè)置/獲取屬性】

element.setAttribute(name,value);
element.getAttribute(name);

【設(shè)置xlink】

、等標(biāo)簽需要設(shè)置xlink屬性

element.setAttributeNS(XLINK_NS,'xlink:href',value);

封裝函數(shù)

將創(chuàng)建標(biāo)簽及添加屬性的操作封閉成一個(gè)函數(shù)，方便復(fù)用

function createTag(tag,objAttr){
 var oTag = document.createElementNS('http://www.w3.org/2000/svg',tag);
  for(var attr in objAttr){
  if(attr == 'xlink:href'){
   oTag.setAttributeNS("http://www.w3.org/1999/xlink",attr,objAttr[attr]);
  }else{
   oTag.setAttribute(attr,objAttr[attr]);
  }  
  } 
 return oTag;
}

下面通過(guò)該函數(shù)，創(chuàng)建一個(gè)圓形

實(shí)例

下面通過(guò)SVG基本操作API，創(chuàng)建一個(gè)可交互的SVG實(shí)例