上篇简要介绍了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

本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形进行交互操作.比CANVAS更加灵活一点.关于SVG的基础知识,请参考SVG学习地址. 2.SVG.js 今天要说的主角是 SVG.js,它是对SVG本身的一个封装库,提供各种API使对SVG的使用更加方便,相当于JQuery对于JS,它的自我介绍是 轻量级,速度快,更具易读性.SVG.js官网介绍

这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层支持canvas.svg.甚至dom,这里我用的是svg,多说无益,上代码. 一.高德地图 以下的步骤在官方文档中都有,而且官方文档比较齐全. 首先需要去高德API官网申请自己的key,此步略过. 拿到key后在页面中引入地图所用的js js <script type="text/javasc

做毕设的时候,因为要使用到画图和自定义动画,所以接触到了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

前言-为什么学习snap.svg.js 前阵子webAPP的技术群里有人感觉到svg+animate的形式感觉很炫,矢量图任意放大且不需要下载图片,并且在手机端效果流畅. (矢量图与位图最大的区别是,它不受分辨率的影响.可以任意放大或缩小图形而不会影响出图的清晰度, 可以按最高分辨率显示到输出设备上,位图即相机拍出来的,由像素块组成的图片. svg代码可使用Adobe公司的AI软件导出,该Snap.svg也是Adobe的开源项目) 虽然svg.animate并不新鲜,但由于svg的代码是由PC计

前端实现看到一个网页的效果很cool(参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html),决定自己去实现以下这个效果,并且封装成一个js插件供大家简单去实现该效果: 插件地址 https://github.com/l4819266/WebInitAnimation 目前,已经实现了三种效果(描绘容器的边框,描绘线状统计图样式,描绘饼状统计图样式): 使用方法: 1.首先引入jquery和svg.js 2.然后引入

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

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

一.折线 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

一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100, 100); //设置radius,指定rx,ry //rect.radius(30); rect.radius(30, 3); 二.圆形 var draw = SVG('svg1').size(300, 300); draw.circle(100).fill('red'); //指定半径画圆 v

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

一.创建a标签,为a标签添加内容 <div id="svg1"></div> <script> //SVG.A 链接创建 var draw = SVG('svg1').size(300, 300); var link = draw.link('http://www.gongjuji.net/'); var rect = link.rect(100, 100); </script> 二.修改链接的地址 <div id="sv