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

1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); var text2 = draw.text(function (add) { //添加span元素包裹的文字 add.tspan('中文内容').newLine(); //指定当前内容开启新的一行,第一行一般都需要 add.tspan('换行1').fill('#f06').newLine(); a…

一.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.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.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradient 渐变处理 linear.radial //线性渐变 linear //径向渐变 radial var gradient = draw.gradient('radial', function (stop) { stop.at(0, '#f06'); stop.at(1, '#0f9'); });…

一.SVG.Image 1.创建和修改图片 var draw = SVG('svg1').size(300, 300); //SVG.Image 加载图片文件 var image = draw.image('../Scripts/36.jpg'); //指定图片的大小 //默认情况下,图片按原比例缩放 var image = draw.image('../Scripts/36.jpg', 200, 300); image.stroke({ width: 2, color: 'blue' }).s…

先贴出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…

一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 50,100'); // polyline.fill('none').stroke({width:2}); //使用数组点 var polyline = draw.polyline([ [0, 0], [100, 50], [50, 100] ]); polyline.fill('none').s…

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