首页 > 代码库 > SVG.js 图案使用和use引用
SVG.js 图案使用和use引用
一.SVG.Pattern 图案设置
var draw = SVG(‘svg1‘).size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.pattern(20, 20, function (add) { add.rect(20, 20).fill(‘#f06‘); add.rect(10, 10); add.rect(10, 10).move(10, 10); }); //获取url的标识对象,returns ‘url(#SvgjsPattern1234)‘ var urlObj = pattern.fill(); console.info(urlObj); //url(#SvgjsPattern1008) //为圆设置图案,fill() 方法设置或获取图片对象 var circle = draw.circle(100); circle.move(100, 100) .fill(pattern); //为矩形设置图案 var rect = draw.rect(100, 100); rect.attr({ fill: pattern }); //修改图案,会覆盖以前的图片 pattern.update(function (add) { add.circle(15).center(10, 10); });
二.SVG.Use 元素的引用
1.
//SVG.Use 元素的引用 //使用元素简单地模拟另一个现有元素。主元素的任何更改将反映在所有使用实例上。 var rect = draw.rect(100, 100).fill(‘#f09‘); var use = draw.use(rect); use.move(100, 100); //当rect修改时,use也会跟着修改 rect.animate(1000).fill(‘#f90‘);
2.SVG.defs() 的声明定义,当use()再显示
var draw = SVG(‘svg1‘).size(300, 300); //SVG.defs() 的声明定义,当use()再显示 var rect = draw.defs().rect(100, 100).fill(‘#f09‘); var use = draw.use(rect); use.move(100, 100); //当rect修改时,use也会跟着修改 rect.animate(1000).fill(‘#f90‘);
3.
var draw = SVG(‘svg1‘).size(300, 300); //SVG.use() 使用外部文件 //这种方法是有用的,当你有复杂的图像已经创建。 //需要注意的是,外部图像(在你的领域)可能需要加载的文件与XHR。 var rect=draw.rect(100,100); console.info(rect); console.info(rect.node.id); var use = draw.use(rect.node.id, ‘svg1.svg‘)
更多:
SVG.js 颜色渐变使用
Svg.js 图片加载
SVG.js 文本绘制整理
SVG.js 图案使用和use引用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。