一.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(#SvgjsPatte…

一.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.i…

一.SVG.Marker 添加标记 SVG.Marker 标记可以被添加到一个线,折线的各点,多边形和路径.有三种类型的标记:开始,中间和结束.如果开始表示第一个点,则结束中间的最后一点和中间点. var draw = SVG('svg1').size(300, 300); var line = draw.line(0, 0, 200, 150); line.stroke('blue').move(20, 20); //创建marker,声明时指定宽度和高度,在标记处添加的形状超出部分会隐藏 v…

一.SVG.Mask 覆盖物设置 1. var draw = SVG('svg1').size(300, 300); //SVG.Mask 覆盖物设置 var ellipse = draw.ellipse(80, 40).move(10, 10).fill('#fff'); var mask = draw.mask().add(ellipse); //添加到矩形 maskWith() var rect = draw.rect(100, 100); rect.maskWith(mask); //获…

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和高度: var rect = draw.rect(100, 100) 椭圆——Ellipse Ellipses就像矩形一样,有两个参数,横向和纵向的直径: var ellipse = draw.ellipse(200, 100) 圆——Circle Circles有一个参数,即圆的直径: var c…

一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = draw.rect(100, 100).move(100, 100); //transform() 获取或设置变换 //默认的变换是absolute,在原始基础上变换 rect.transform({ rotation: 125 //设置旋转 }).transform({ rotation: 37.5…

一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect(100, 100); rect.attr('x', 50).attr('y', 50); rect.attr({ fill: '#f06', 'fill-opacity': 0.5, stroke: '#000', 'stroke-width': 10 }); //删除属性 rect.attr('f…

一.SVG.Doc 创建SVG文档 var draw = SVG('drawing') <div id="svg1"></div> <script> //创建svg,并画出正方形 var draw = SVG('svg1').size(400, 400); var rect = draw.rect(100, 100).attr({ fill: '#f06' }); </script> 二.SVG.Nested,SVG的嵌套 <div…

做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg.js这样的集成的SVG库进行具体讲解的教程,做这件事的,本文应该是第一篇,也是给那些需要动态的使用SVG的兄弟们一点帮助. 简介: SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画.  SVG(Scalable Vector Graphics,可缩放矢量图形)是基于X…

先贴出github地址:https://github.com/svgdotjs/svg.js(也就是原文档的说明和文件的下载地址) 创建SVG文档 var draw = SVG('drawing').size(300, 300) //设置大小,如果是百分比则跟随父窗体变化,drawing是html的divid var rect = draw.rect(100, 100).attr({ fill: '#f06' })//draw.rect 画一个矩形,fill颜色是#06 html元素: <div…