SVG.js 引用获取整理
一、SVG.get() 根据id获取元素
var draw = SVG('svg1').size(300, 300);
var circle = draw.circle(50);
circle.fill('red').move(10, 10);
//添加类
circle.addClass('circle');
//设置ID
circle.id('circle');
//SVG.get() 获取Element对象
var circle2 = SVG.get('circle');
console.info(circle2);
circle2.stroke({
color: 'blue',
width: 2
});
二、SVG.select()/element.select() 根据CSS选择器获取
注:这里的select()方法用于draw、group
var draw = SVG('svg1').size(300, 300);
//SVG.select() 根据类名获取元素
//element.select()
var ellipse = draw.ellipse(100, 50);
ellipse.fill('blue');
ellipse.addClass('my-class');
var rect = draw.rect(100, 100);
rect.move(100, 100);
rect.addClass('my-class');
//var elements = SVG.select('.my-class');
var elements = SVG.select('rect.my-class');
elements.fill('#f06'); var group1 = draw.group();
var txt1 = draw.text(function (add) {
add.tspan('第一行').addClass('words').newLine();
add.tspan('第二行').addClass('words').newLine();
});
txt1.move(50, 50);
group1.add(txt1);
//这个方法可以使用
group1.select('.words').fill('green');
//这个方法好像已经不可以使用了
//SVG.select('.words', group1).fill('green');
注:关于SVG的原始Dom元素操作、及在JQuery中的使用等此处省略
三、SVG 节点对象获取
var draw = SVG('svg1').size(300, 300);
//Circular references基础节点获取,
var ellipse = draw.ellipse(100, 80);
ellipse.fill('#06f');
//element.node 获取SVGElement
console.info(ellipse.node); //<ellipse id="SvgjsEllipse1008" rx="40" ry="50" cx="90" cy="100" fill="#0066ff"></ellipse>
//element.native() 获取element.node
var node = ellipse.native();
console.info(node);
//node.instance 获取SVG.Element
var elli2 = node.instance;
elli2.size(80, 100).move(50, 50);
四、SVG 根节点下的子节点获取
var draw = SVG('svg1').size(300, 300);
//SVG根节点下的子节点操作 Child references
//draw.children() 获取所有子节点
var ellipse = draw.ellipse(200, 150).move(50, 50).fill('#f06');
var rect = draw.rect(50, 50);
var children = draw.children();
//draw.clear() 清空子节点
draw.clear();
//draw.each() 遍历子节点
draw.each(function (i, children) {
console.info(i); //当前索引
console.info(children) //当前children引用
this.fill('green');
});
//draw.first()/draw.last() 获取第一个和最后一个
draw.first().stroke({ width: 2 });
draw.last().fill('green');
//draw.get() //获取指定索引的节点对象
var second = draw.get(1).stroke({ width: 2, color: 'yellow' })
//draw.index() //获取指定对象的索引 defs元素
var index = draw.index(second);
console.info(index); //1 ,特别说明,第一个元素是
//draw.has() //判断是否含有指定对象的元素
console.info(draw.has(second)); //true
五、SVG 子节点获取根节点
var draw = SVG('svg1').size(300, 300);
//SVG子节点获取父节点引用 Parent references
//element.doc() 获取draw SVG根节点
var nested = draw.nested().addClass('test');
var group = nested.group();
var rect = draw.rect(100, 100).fill('#f09');
group.add(rect);
var doc = rect.doc().ellipse(50, 100).move(50, 50);
//element.parent() 获取父节点或筛选父节点
rect.parent() //-> returns group
rect.parent(SVG.Doc) //-> returns draw
rect.parent(SVG.Nested) //-> returns nested
rect.parent(SVG.G) //-> returns group
rect.parent('.test') //-> returns nested
//element.parents() 获取父节点数据或者筛选父节点,返回group数组
var group1 = draw.group().addClass('test')
, group2 = group1.group()
, rect = group2.rect(100, 100) rect.parents() // returns [group1, group2, draw]
rect.parents('.test') // returns [group1]
rect.parents(SVG.G) // returns [group1, group2]
六. SVG 属性引用获取
//SVG URI references
//如果一个元素是通过属性链接到另一个元素,链接元素的实例可以拿来与reference()方法。
use.reference('href') //-> returns used element instance
// or
rect.reference('fill') //-> returns gradient or pattern instance for example
// or
circle.reference('clip-path') //-> returns clip instance
更多:
SVG.js 引用获取整理的更多相关文章
- SVG.js 元素操作整理(二)-Transform
一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...
- SVG.js 元素操作整理(一)
一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect( ...
- SVG.js 文本绘制整理
1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...
- SVG.js 图案使用和use引用
一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.patt ...
- SVG.js 颜色渐变使用
一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...
- Svg.js 图片加载
一.SVG.Image 1.创建和修改图片 var draw = SVG('svg1').size(300, 300); //SVG.Image 加载图片文件 var image = draw.ima ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- SVG.js 基础图形绘制整理(一)
一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100 ...
- svg.js教程及使用手册详解(二)
上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和 ...
随机推荐
- Redux 和 ngrx 创建更佳的 Angular 2
Redux 和 ngrx 创建更佳的 Angular 2 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build- ...
- 2018年长沙理工大学程序设计竞赛 J - 杯子
题意: 链接:https://www.nowcoder.com/acm/contest/96/J一天durong同学买了一个无限长的杯子,同时买了n个球,并且标号为1,2,3......n,duron ...
- 1200 同余方程 2012年NOIP全国联赛提高组
题目描述 Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入描述 Input Description 输入只有一行,包含两个正整数 a, b,用 一个 空 ...
- BZOJ.2660.[BJOI2012]最多的方案(DP)
题目链接 首先我们知道: 也很好理解.如果相邻两项出现在斐波那契表示法中,那它们显然可以合并. 所以我们能得到\(n\)的斐波那契表示,记\(pos[i]\)为\(n\)的斐波那契表示法中,第\(i\ ...
- HDU.5819.Knights(概率DP)
题目链接 参考一下这的. \(Description\) 数轴上有n个骑士,分别位于1,2,3,...,n,它们的移动速度相同,初始移动方向已知.当两个骑士相遇时,各有50%的概率获胜,失败的骑士就死 ...
- Maven入门指南③:坐标和依赖
1 . 坐标 maven 的所有构件均通过坐标进行组织和管理.maven 的坐标通过 5 个元素进行定义,其中 groupId.artifactId.version 是必须的,packaging 是可 ...
- 用 consul + consul-template + registrator + nginx 打造真正可动态扩展的服务架构
https://mp.weixin.qq.com/s?src=3×tamp=1503654544&ver=1&signature=UcJdgd4vgt*3AR ...
- 如何在Root的手机上开启ViewServer,使得HierachyViewer能够连接(转)
前期准备: 关于什么是Hierarchy Viewer,请查看官方文档:http://developer.android.com/tools/debugging/debugging-ui.html.个 ...
- JTAG – A technical overview and Timing
This document provides you with interesting background information about the technology that underpi ...
- C++学习笔记23,类内函数重载
该博文仅用于交流学习.请慎用于不论什么商业用途,本博主保留对该博文的一切权利. 博主博客:http://blog.csdn.net/qq844352155 转载请注明出处: 在一个类内,最常见的就是构 ...