SVG.js包的使用-程序员宅基地

技术标签: 前端  

1、SVG.js包简介

SVG.js是用于绘制矢量图和制作矢量动画的轻量级js库。

官网:https://svgjs.com/

(1)SVG.js包的开发文档

W3C关于SVG.js包的文档(英文)

https://www.w3.org/TR/SVG/

SVG.js包的英文开发文档,可以在官网和W3C上看到,但是中文的开发文档我没有找到,如果感觉英文看不习惯,可以使用Google浏览器,它的右上角有个按钮,点击“翻译此页”能够翻译整个网页。

 

 

2、SVG.js安装与入门

2.1 下载SVG.js包

(1)在SVG.js官网上下载
2.x版本下载地址:https://svgjs.com/docs/2.7/installation/
3.x版本下载地址:https://svgjs.com/docs/3.0/installation/
(2)在github上下载
下载地址:https://github.com/svgdotjs/svg.js
(3)在CNDJS上下载SVG.js包
SVG.js有很多版本,如果需要下载其他版本可以在CDNJS上下载。在CDNJS上,不仅可以搜索和下载js库,还可以找到相应js库的官网和github。
CDNJS的网址:https://cdnjs.com/

2.2 SVG.js入门

导入SVG.js包,绘制一个矩形
代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绘制矢量图</title>
        <script type="text/javascript" src="js/svg-2.7.1.min.js" ></script>
    </head>
    <body>
        <div id="drawing"></div>    
    </body>
    <script type="text/javascript">
        //判断浏览器是否支持绘制SVG
        if (SVG.supported) {
            var drawing = SVG("drawing").size('100%', '100%');
            drawing.rect(100, 100).attr({ fill: '#f06' })
        }else{
            alert("浏览器不支持SVG!")
        }
    </script>
</html>


3、SVG.js绘制矢量图

3.1 基本介绍

此包能够绘制矩形(rect())、圆(circle())、椭圆(ellipse())、直线(line())、折线(polyline())、多边形(polygon())等,上述的方法比较简单,参见官网开发文档中的Elements目录即可。本段介绍一下绘制path路径中的参数和命令。

绘制path的命令如下:
M = moveto //绘制起始点;
L = lineto //绘制直线;
H = horizontal lineto //绘制水平直线
V = vertical lineto //绘制垂直直线
C = curveto //绘制曲线
S = smooth curveto //绘制平滑曲线
Q = quadratic Bézier curve //二次贝塞尔曲线
T = smooth quadratic Bézier curveto //平滑二次贝塞尔曲线
A = elliptical Arc //绘制椭圆弧线
Z = closepath //终止路径
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

3.2 path路径绘制

注意:绘制路径时必须要有M或者m开头
(1)绘制一条直线(L)
绘制从(0,0)->(50,50)两点的直线,如下:
var pathStr = 'M0 0 L50 50';// L表示绘制直线,需要两个参数;

绘制从(0,0)->(50,0)两点的水平直线,如下:
var pathStr = 'M0 0 H50';//H表示绘制水平直线,仅仅需要一个参数50;
var pathStr = 'M0 0 L50 0';
var pathStr = 'M0 0 50 0';

绘制从(0,0)->(0, 50)两点的垂直直线,如下:
var pathStr = 'M0 0 V50';//V表示绘制垂直直线,仅仅需要一个参数50;
var pathStr = 'M0 0 L0 50';
var pathStr = 'M0 0 0 50';// 也可以不要L

(2)绘制多点折线(L)
绘制从(0,0)->(50, 50)->(20, 40)的折线
var pathStr = 'M0 0 L50 50 20 40';// 可以仅仅在第一个点后加1个L即可
var pathStr = 'M0 0 L50 50 L20 40';// 也可以在每个点前都加L
var pathStr = 'M0 0 50 50 20 40';// 还可以仅仅加1个M

(3)绘制曲线(C)
注意:绘制曲线必须至少4个点,1个起始点、3个曲线点,此外必须是3个点为1组。
绘制从(0,0)->(30,50)->(20,40)->(10,60)的曲线,共4个点。
var pathStr = 'M0 0 C30 50 20 40 10 60';

绘制从(0,0)->(30,50)->(20,40)->(10,60) ->(60,60)->(80,90)->(30,100)的曲线,共7个点。
var pathStr = 'M0 0 C30 50 20 40 10 60 C60 60 80 90 30 100';// 每3个点为1组,可以在前面C;
var pathStr = 'M0 0 C30 50 20 40 10 60 60 60 80 90 30 100';// 也可以在前面加1个C;
注意:如果这3个点(60,60)、(80,90)、(30,100)中缺少任何1个或2个,则这3个点都不能显示。

(4)绘制二次贝塞尔曲线(Q)
贝塞尔曲线类似于曲线,不过它是两个点为1组。
var pathStr = 'M0 0 Q30 50 20 40 Q10 60 60 60';
var pathStr = 'M0 0 Q30 50 20 40 10 60 60 60';
注意:如果这2个点(10,60) 、(60,60)缺少1个2个点都会显示。


(5)其他曲线
平滑曲线(S)的用法与二次贝塞尔曲线(Q)的用法相同。平滑二次贝塞尔曲线(T)与直线(L)的用法相同。
绘制平滑二次贝塞尔曲线(T)
var pathStr = 'M0 0 T30 50 T20 40 T10 60 T10 20';
var pathStr = 'M0 0 T30 50 20 40 10 60 10 20';

(6)绘制椭圆弧线(A)
绘制1椭圆圆弧必须要有7个参数,参数组成A rx ry x-axis-rotation large-arc-flag sweep-flag x y。
第1个参数rx:X轴的半径;
第2个参数ry:Y轴的半径;
第3个参数x-axis-rotation:弧线沿着X轴的旋转,一般默认为0;
第4个参数large-arc-flag:最大角度标识符号,只能是0或1,一般默认为1。
第5个参数sweep-flag:标识绘图的方向只能是0或1,1表示顺时针绘制弧线,0表示逆时针绘制弧线。
第6个参数sweep-flag:圆弧的结束点X;
第7个参数sweep-flag:圆弧的结束点Y;

绘制1个弧线
var pathStr = 'M50 0 A20 20 0 0 0 100 50';
绘制2个弧线
var pathStr = 'M50 0 A20 20 0 0 0 100 50 A20 20 0 0 1 200 200';
var pathStr = 'M50 0 A20 20 0 0 0 100 50  20 20 0 0 1 200 200';

运行结果如下:

 

4、实现的源代码

// 要看上述的代码结果,只需要替换下述的代码中相应部分的代码即可。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>绘制矢量图</title>
        <script type="text/javascript" src="js/svg-2.7.1.min.js" ></script>
    </head>
    <body>
        <div id="drawing"></div>    
    </body>
    <script type="text/javascript">
        //判断浏览器是否支持绘制SVG
        if (SVG.supported) {
            var drawing = SVG("drawing").size('300', '300');
            // 绘制2个弧线
            var pathStr = 'M50 0 A20 20 0 0 0 100 50  20 20 0 0 1 200 200';
            var path = drawing.path(pathStr);
            // 无填充
            path.fill('none');
            // 设置线条的颜色、宽度、连接点形状
            path.stroke({ color: '#f06', width: 2, linecap: 'round', linejoin: 'round' });
        }else{
            alert("浏览器不支持SVG!")
        }
    </script>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/make_progress/article/details/100142364

智能推荐

爬虫入门之结构化数据类型XML的提取(Xpath)_xpath可以从-程序员宅基地

文章浏览阅读1.1k次。什么是XPath?XPath (XML Path Language) 是一门在 XML 文档中查找信息的语言,可用来在 XML 文档中对元素和属性进行遍历。什么是XML?XML 指可扩展标记语言(EXtensible Markup Language)XML 是一种标记语言,很类似 HTMLXML 的设计宗旨是传输数据,而非显示数据XML 的标签需要我们自行定义XML 被设计为具..._xpath可以从

1085 PAT单位排行 (25分) [排序]_085 pat单位排行 (25 分) 每次 pat 考试结束后,考试中心都会发布一个考生单位排行-程序员宅基地

文章浏览阅读129次。每次 PAT 考试结束后,考试中心都会发布一个考生单位排行榜。本题就请你实现这个功能。输入格式:输入第一行给出一个正整数 N(≤10​5​​),即考生人数。随后 N 行,每行按下列格式给出一个考生的信息:准考证号 得分 学校其中准考证号是由 6 个字符组成的字符串,其首字母表示考试的级别:B代表乙级,A代表甲级,T代表顶级;得分是 [0, 100] 区间内的整数;学校是由..._085 pat单位排行 (25 分) 每次 pat 考试结束后,考试中心都会发布一个考生单位排行

机器视觉技术助力工业物联网发展,起到核心作用。_工业互联网的发展,对机器视觉有哪些影响-程序员宅基地

文章浏览阅读451次。工业物联网有时也被称为工业4.0,随着人口红利的终结,未来也正在向自动化前进。在18世纪后期,工业1.0使用蒸汽动力进行机械生产。20世纪初,电力的出现帮助我们进入大规模生产的工业2.0。20世纪70年代,电子和IT基础设施开始实现生产自动化,我们进入了3.0。如今作为文明的下一步是IIoT和工业4.0,其中网络物理系统将监视,分析和改进我们的制造业务。美国国家科学基金会将网络物理系统描述为“..._工业互联网的发展,对机器视觉有哪些影响

c#制作简单计算器_c#计算器-程序员宅基地

文章浏览阅读3.3k次,点赞8次,收藏20次。几天内居然这么多人看了,那么就更新一下。之前的代码复用情况太多,改了一下,少了一两百行。不过可能还有bug,欢迎指正。首先把界面设计好,画好那么多按钮,并给每个按钮命名,然后再双击按钮,添加相应的事件,比如按数字就在textbox.text加上数字。using System;using System.Collections.Generic;using System.ComponentModel..._c#计算器

Acwing 高精度加减乘除模板题-程序员宅基地

文章浏览阅读91次。文章目录791. 高精度加法793. 高精度乘法题目来源于Acwing算法学习社区791. 高精度加法#include <iostream>#include <vector>using namespace std;vector<int> A , B , C;string a , b;vector<int> add(vector<int>& A , vector<int>& B){ in

/c6.e3b.biz/index.php,iptv-m3u-maker/tv.m3u8 at d59f4e688e2b4486d6219f094aac886be53c25d2 · srsman/ip...-程序员宅基地

文章浏览阅读7.4k次。#EXTINF:-1, group-title="其他频道", Oxigeno90http://i50.letio.com/9102.aac#EXTINF:-1, group-title="其他频道", ProyectoPhttp://149.56.23.143:8200/stream#EXTINF:-1, group-title="其他频道", Report-TVhttp://66.55.93...._9128h.xyz

随便推点

[二维数组]-顺时针螺旋打印二维数组_顺时针螺旋式从外向内输出二维数组数据-程序员宅基地

文章浏览阅读2.2k次。如下图 当我们遇到一个复杂问题时可以用图像帮我们思考在上图中,我们设置二维数组宽度为rows,高度为columns,取左上角坐标为(startX,startY),取左下角的坐标为(endX,endY),可以发现每次循环的开始为(startX,startY),endX和endY可以根据rows和columns来推出,所以我们应该去发现(startX,startY)的规律我们来_顺时针螺旋式从外向内输出二维数组数据

【自学】JS原型链与继承_js 原型链依次往上查找null-程序员宅基地

文章浏览阅读348次。JS原型链与继承知识点匿名函数调用的this指向原型链与原型对象new对象的过程代码注释原型链的查找顺序查找自身私有属性知识点匿名函数调用的this指向 JavaScript的匿名函数中this指向window  javascript中函数的this指向函数的最后调用者,而匿名函数是一个没有指针的全局变量,在非严格版中默认调用者是window,那么它的this指向的就是全局,就是window对象。原型链与原型对象原型对象是函数特有的(prototype),为了继承所有类型的数据都有原型链(__js 原型链依次往上查找null

同态加密&隐私保护【更新中】_ssw 加密算法在 2009 年由 shen、shi 和 waters 提出-程序员宅基地

文章浏览阅读1.3w次。关于 密码学Paillier同态加密的介绍以及c++实现_ssw 加密算法在 2009 年由 shen、shi 和 waters 提出

2016更改计算机名蓝屏,教您怎么解决电脑蓝屏代码-程序员宅基地

文章浏览阅读874次。蓝屏代码是提示电脑信息的显示页面,一般的电脑蓝屏代码都是位于屏幕提示文字的第一段或者倒数第三段,但是蓝屏的代码都是有规律的,那就是都是以“***stop”为开头。那么今天小编我就来告诉你们,当遇到电脑蓝屏代码的时候,该如何解决。蓝屏代码就是指网站在通过某个操作显示的操作页面的代码,电脑的使用用户可以通过这个代码来找到出现问题的原因和相对应的解决方法。今天我我们就一起来研究研究当遇到电脑蓝屏代码的时..._2016系统蓝屏修复

Win10环境下Qt的Windows最新安装包出现未响应的问题的解决办法_qt-opensource-windows-x86 安装程序无法运行-程序员宅基地

文章浏览阅读4.8k次,点赞13次,收藏3次。问题:选择Qt的LTS版本的一个最新的安装包,下载下来之后。点击进行安装,运行到选择组件那一步,程序就会变成未响应状态,如下图:解决办法:双击运行前,右键选择“以管理员身份运行”。..._qt-opensource-windows-x86 安装程序无法运行

Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)-程序员宅基地

文章浏览阅读55次。上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了。没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的肯定比我的好,不过,这个是Solr系列文章,会从Solr的基础入门讲到实际开发中的分页,高亮,Facet查询等高级用法。所以,基础的入门也会涉及一些,望大家见谅。我用这么多篇文章,来总..._solrnet 统计组件与支点(pivot)相结合

推荐文章

热门文章

相关标签