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


Posted in Javascript onSeptember 14, 2017

前面的话

本文将详细介绍SVG基本操作API,并使用这些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.getAttribute('r');
 var r = Number(str);
 //声明步长值
 var step = 0;
 //声明弹性距离
 var len = r - r0;
 //声明弹性系数
 var k = 0.7;
 //声明损耗系数
 var z= 0.7;
 //声明当前值
 var cur = r0;
 clearInterval(circle.timer);
 circle.timer = setInterval(function(){
  //获取当前值cur
  cur = circle.getAttribute('r');
  //更新弹性距离
  len = r - cur;
  //弹力影响
  step += len*k;
  //阻力影响
  step = step*z;
  //赋值
  circle.setAttribute('r',Number(cur) + step);
  //当元素的步长值接近于0,并且弹性距离接近于0时,停止定时器
  if(Math.round(step) == 0 && Math.round(len) == 0){
   circle.setAttribute('r',r);
   clearInterval(circle.timer); 
  } 
 },30);
}
</script>

以上这篇使用SVG基本操作API的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
js验证框架实现代码分享
May 18 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
JSON 数据格式详解
Sep 13 #Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 #Javascript
详解动画插件wow.js的使用方法
Sep 13 #Javascript
JS库之Highlight.js的用法详解
Sep 13 #Javascript
详解wow.js中各种特效对应的类名
Sep 13 #Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 #Javascript
JS库之Waypoints的用法详解
Sep 13 #Javascript
You might like
php 分页类 扩展代码
2009/06/11 PHP
php获取域名的google收录示例
2014/03/24 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
摘自启点的main.js
2008/04/20 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Node.js简单入门前传
2017/08/21 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python正则表达式经典入门教程
2017/05/22 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
Python模块future用法原理详解
2020/01/20 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
python语言是免费还是收费的?
2020/06/15 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
任课老师推荐信范文
2013/11/24 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
物业品质提升方案
2014/06/08 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书