一.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引用的更多相关文章

  1. SVG.js 引用获取整理

    一.SVG.get() 根据id获取元素 var draw = SVG('svg1').size(300, 300); var circle = draw.circle(50); circle.fil ...

  2. SVG.js Marker标记和自定义标签

    一.SVG.Marker 添加标记 SVG.Marker 标记可以被添加到一个线,折线的各点,多边形和路径.有三种类型的标记:开始,中间和结束.如果开始表示第一个点,则结束中间的最后一点和中间点. v ...

  3. SVG.js Mask覆盖和ClipPath裁剪

    一.SVG.Mask 覆盖物设置 1. var draw = SVG('svg1').size(300, 300); //SVG.Mask 覆盖物设置 var ellipse = draw.ellip ...

  4. svg.js教程及使用手册详解(二)

    上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和 ...

  5. SVG.js 元素操作整理(二)-Transform

    一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...

  6. SVG.js 元素操作整理(一)

    一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect( ...

  7. Svg.Js 父类的基础操作

    一.SVG.Doc 创建SVG文档 var draw = SVG('drawing') <div id="svg1"></div> <script&g ...

  8. svg.js教程及使用手册详解(一)

    做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg. ...

  9. SVG操作插件:SVG.JS 个人提取部分实用中文文档

    先贴出github地址:https://github.com/svgdotjs/svg.js(也就是原文档的说明和文件的下载地址) 创建SVG文档 var draw = SVG('drawing'). ...

随机推荐

  1. java 的反射机制

    一:介绍 1.大纲 #1 允许程序在执行期间,调用反射API取得任何类的内部信息,并且可以直接操作任何对象的内部属性和方法. #2 学习反射,需要掌握的知识点: *实例化class类 *获取类的完整结 ...

  2. 关于函数getline()(简单注意事项,不懂你怼我!!!)

    关于getline()函数好使但是有毒: 有两种操作需要进行特殊处理: First: #include <iostream>#include <cstring>#include ...

  3. ServletContextListener作用

    ServletContext 被 Servlet 程序用来与 Web 容器通信.例如写日志,转发请求.每一个 Web 应用程序含有一个Context,被Web应用内的各个程序共享.因为Context可 ...

  4. DIM-00014: Cannot open the Windows NT Service Control Manager.

    创建Oracle数据库时出错: OPW-00001: Unable to open password-file DIM-00014: Cannot open the Windows NT Servic ...

  5. JavaScript中的Map、Set及其遍历

    Map Map是一组键值对的结构,具有极快的查找速度. Map的定义. //空map设值key-value var m = new Map(); m.set("XiaoMing", ...

  6. HDU 3802Ipad,IPhone

    前两块可以看成是不是二次剩余,快速幂计算即可. 后半部分可以看成x1=a+b+2ab,x2=a+b-2ab为特征方程x^2-px-qx=0的两根 然后可以通过韦达定理求出p和q,因此递推式为A(n+2 ...

  7. SAE J1850 VPW Implement

    ---恢复内容开始--- OBDII Interface Project When I can ever find enough time away from schoolwork, I try to ...

  8. MDK5 and STM32Cube

    D:\Workspace\........\RTE\Device>STM32CubeMX.exe -s project.script -tpl_path C:\Keil5\ARM\Pack\Ke ...

  9. 少女花海自拍撞亡:自拍PK火车速度,没有赢家

    心理学研究,自拍是一种自我强化的过程.人们都或多或少有着自我关注的倾向,即“自恋”.而人作为有思想的群体性社会动物,有着分享和交流的欲望.尤其是现代快节奏的生活常使人感觉“亚历山大”,自拍恰恰就成为释 ...

  10. git 自动转换行符的坑爹案例

    本人写的脚本都是在unix上运行的,但是编写有时候喜欢使用Git拉去到windows的ide进行编写,毕竟我的unix只有命令行的没有ide, 殊不知有一天我的sh执行时出现错误 -bash: ./d ...