使用SVG基本操作API
Posted 小火柴的蓝色理想
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用SVG基本操作API相关的知识，希望对你有一定的参考价值。
前面的话
本文将详细介绍SVG基本操作API，并使用这些API制作实例效果
效果演示
下面是利用SVG基本操作API制作的一个前端开发学习目录。点击中间的元素，可随机旋转。点击目录内容，可进入相关页面。宽边框的元素表示为二级目录
基础API
在javascript中，可以使用一些基本的API来对SVG进行操作
【NS地址】
因为SVG定义在其自身的命令空间下，而不是html的命名空间下，可以作为单独的XML文件存在。所以需要使用自身的NS地址
有两个常用的NS地址
var SVG_NS = "http://www.w3.org/2000/svg";
var XLINK_NS = "http://www.w3.org/1999/xlink";
【创建图形】
document.createElementNS(SVG_NS,tagName);
【添加图形】
element.appendChild(childElement)
【设置/获取属性】
element.setAttribute(name,value);
element.getAttribute(name);
【设置xlink】
<a>、<textPath>等标签需要设置xlink属性
element.setAttributeNS(XLINK_NS,\'xlink:href\',value);
封装函数
将创建标签及添加属性的操作封闭成一个函数，方便复用
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;
}
下面通过该函数，创建一个圆形
<script> 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; } 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); </script>
实例
下面通过SVG基本操作API，创建一个可交互的SVG实例
<style> #box{ height: 300px; width: 300px; background: hsl(20,40%,90%); background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; } </style> <div id="box"></div> <script> var oSvg = createTag(\'svg\',{\'version\':\'1.1\',\'xmls\':\'http://www.w3.org/2000/svg\',height:\'100%\',width:\'100%\'}); var oBox = document.getElementById(\'box\'); var W = parseInt(getComputedStyle(oBox).width); var H = parseInt(getComputedStyle(oBox).height); var appearance = { \'dis\':H/3, \'r0\':H/8,\'r\':H/10, \'x0\':W/2,\'y0\':H/2, \'fontSize\':H/20, \'bg0\':\'hsla(0,0%,100%,.6)\',\'bg\':\'hsla(0,0%,100%,.3)\', \'color0\':\'hsl(210,13%,30%)\',\'color\':\'hsl(210,13%,30%)\', \'borderColor0\':\'rgba(0,0,0,0.3)\',\'bordercolor\':\'rgba(0,0,0,0.3)\', \'strokWidth0\':3,\'strokWidth\':2, \'lineColor\':\'rgba(0,0,0,0.3)\',\'lineWidth\':1,\'lineDashed\':\'5,5\' } var data = { text:\'前端开发\', children:[ {text:\'HTML\',url:\'http://www.cnblogs.com/xiaohuochai/p/5203223.html\'}, {text:\'CSS\',url:\'http://www.cnblogs.com/xiaohuochai/p/5249139.html\'}, {text:\'JS\',url:\'http://www.cnblogs.com/xiaohuochai/p/5613593.html\'}, {text:\'ES6\',url:\'http://www.cnblogs.com/xiaohuochai/p/7233392.html\'}, {text:\'HTTP\',url:\'http://www.cnblogs.com/xiaohuochai/p/6392010.html\'}, {text:\'NodeJS\',url:\'http://www.cnblogs.com/xiaohuochai/p/6940560.html\'}, {text:\'前端工具\',url:\'http://www.cnblogs.com/xiaohuochai/p/6666415.html\'}, ], } addChildenTags(); addCenterTag(); oBox.appendChild(oSvg); 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; } function addCenterTag(){ var oG = createTag(\'g\',{\'style\':\'cursor:default\'}); var oCircle = createTag(\'circle\',{\'cx\':appearance.x0,\'cy\':appearance.y0,\'r\':appearance.r0,\'fill\':appearance.bg0,\'stroke\':appearance.borderColor0,\'stroke-width\':appearance.strokWidth0}); var oText = createTag(\'text\',{\'x\':appearance.x0,\'y\':appearance.y0,\'font-size\':appearance.fontSize,\'text-anchor\':\'middle\',\'dominant-baseline\':\'middle\',\'stroke-width\':appearance.strokWidth0}); oText.innerHTML = data.text; oG.appendChild(oCircle); oG.appendChild(oText); oSvg.appendChild(oG); } function addChildenTags(){ var children = data.children; var length = children.length; var deg = (360/length)*(2*Math.PI)/360; for(var i = 0; i < children.length;i++){ var cos = Math.cos(deg*i - 90); var sin = Math.sin(deg*i - 90); var x = appearance.x0 + appearance.dis*cos; var y = appearance.y0 + appearance.dis*sin; var oA = createTag(\'a\',{\'xlink:href\':children[i].url,\'target\':\'_black\'}); var oG = createTag(\'g\',{\'style\':\'cursor:pointer\'}); oG.index = i; var oLine = createTag(\'line\',{\'x1\':x-appearance.r*cos,y1:y-appearance.r*sin,x2:appearance.x0+appearance.r0*cos,y2:appearance.y0+appearance.r0*sin,\'stroke\':appearance.lineColor,\'stroke-width\':appearance.lineWidth,\'stroke-dasharray\':appearance.lineDashed,\'style\':\'transition:.5s\'}); var oLineHelper = createTag(\'line\',{\'x1\':x-appearance.r*cos,y1:y-appearance.r*sin,x2:appearance.x0+appearance.r0*cos,y2:appearance.y0+appearance.r0*sin,\'stroke\':\'transparent\',\'stroke-width\':10}); var oCircle = createTag(\'circle\',{\'cx\':x,\'cy\':y,\'r\':appearance.r,\'fill\':appearance.bg,\'stroke\':appearance.bordercolor,\'stroke-width\':appearance.strokWidth,\'class\':\'frostedglass\'}); var oText = createTag(\'text\',{\'x\':x,\'y\':y,\'font-size\':appearance.fontSize,\'text-anchor\':\'middle\',\'dominant-baseline\':\'middle\',\'stroke-width\':appearance.strokWidth,fill:appearance.color}); oText.innerHTML = children[i].text; oG.appendChild(oLine); oG.appendChild(oLineHelper); oG.appendChild(oCircle); oG.appendChild(oText); oA.appendChild(oG); oSvg.appendChild(oA); oG.onmouseenter = function(){ elasticMove(this,appearance.r*1.2); var line = this.children[0]; line.removeAttribute(\'stroke-dasharray\'); line.setAttribute(\'stroke-width\',appearance.lineWidth*3); line.setAttribute(\'x1\',appearance.x0+(appearance.dis - appearance.r0)*Math.cos(deg*this.index - 90)); line.setAttribute(\'y1\',appearance.y0+(appearance.dis - appearance.r0)*Math.sin(deg*this.index - 90)); } oG.onmouseleave = function(){ elasticMove(this,appearance.r); var line = this.children[0]; line.setAttribute(\'stroke-width\',appearance.lineWidth); line.setAttribute(\'stroke-dasharray\',appearance.lineDashed); line.setAttribute(\'x1\',appearance.x0+(appearance.dis - appearance.r)*Math.cos(deg*this.index - 90)); line.setAttribute(\'y1\',appearance.y0+(appearance.dis - appearance.r)*Math.sin(deg*this.index - 90)); } } } function elasticMove(obj,str){ var circle = obj.getElementsByTagName(\'circle\')[0]; var r0 = circle以上是关于使用SVG基本操作API的主要内容，如果未能解决你的问题，请参考以下文章
Android 插件化VirtualApp 源码分析 ( 目前的 API 现状 | 安装应用源码分析 | 安装按钮执行的操作 | 返回到 HomeActivity 执行的操作 )(代码片段