一、折线

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').stroke({
width: 2,
color: 'red'
});
//获取节点数组,返回 SVG.PoineArray
var array1 = polyline.array();
console.info(array1);
//修改折线,
polyline.plot([
[0, 0],
[100, 50],
[50, 100],
[150, 150],
[200, 200]
]);
//使用动画
polyline.animate(1000).plot([
[50, 150],
[100, 200]
]);

二、多边形

var draw = SVG('svg1').size(300, 300);
//画多边形
var polygin = draw.polygon('0,0 100,50 50,100');
polygin.fill('none').stroke({
width: 1
});
//获取点数组 SVG.PointArray
var array1 = polygin.array();
console.info(array1);
//修改当前多边形
// polygin.plot([
// [0,0], [100,50], [50,100], [150,50], [200,50]
// ]);
//使用动画
polygin.animate(1000).plot([
[0, 0],
[100, 50],
[50, 100],
[150, 50],
[200, 50]
]);

三、路径

var draw = SVG('svg1').size('100%', 300);
//画 路径
var path = draw.path('M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100');
//获取数组点 SVG.PathArray
var array1 = path.array();
console.info(array1);
//获取路径的长度
var length = path.length(); //949.8208618164062
console.info(length);
//返回指定路径位置的点,返回SVG.Point
var point = path.pointAt(105);
console.info(point);
//修改路径的位置
path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');
//使用动画,对于path的动画,只有相邻的两个状态的点数相同
//也就是只有路径具有相同的命令(M、C、S等,才会有效果
path.animate(1000)
.plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
.loop(true, true);

更多:

SVG.js 基础图形绘制整理(一)

Svg.Js 父类的基础操作

Svg.Js A标签,链接操作

SVG.js 基础图形绘制整理(二)的更多相关文章

  1. SVG.js 基础图形绘制整理(一)

    一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100 ...

  2. Matlab绘图基础——图形绘制的插值  以及 图像大小的重采样

    使用说明:图形绘制时的插值 interp1   %1-D data interpolation interpft  %使用fft算法插值     %将原数据x转换到频率域,再逆转换回来更密集的数据采样 ...

  3. JS基础入门篇(二十七)—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  4. 【转】OpenGL基础图形编程(二)

    原文:http://blog.chinaunix.net/uid-20638550-id-1909184.html  分类: 十一.位图与图像 11.1.位图 11.1.1 位图(Bitmap)与字符 ...

  5. Javascript进阶篇——(JS基础语法)笔记整理

    根据慕课网学习整理到一起的笔记,把东西整理到一起看起来比较方便 什么是变量字面意思:变量是可变的量:编程角度:变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可 ...

  6. Matlab绘图基础——图形绘制的插值

    interp1   %1-D data interpolation interpft  %使用fft算法插值     %将原数据x转换到频率域,再逆转换回来更密集的数据采样点 spline    %一 ...

  7. 两万字Vue.js基础学习笔记(二)

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  8. js基础的知识整理

    一.操作样式: .style   操作行间样式 .className 修改class 二.操作属性 1. .  更简单,操作已有的属性 2. [] 更灵活,点能做的,方括号都能做.方括号中放的是字符串 ...

  9. js基础之动画(二)

    一.多物体同时运动 栗子一:多个Div,鼠标移入变高,动态下拉菜单 function startMove(obj,iTarget){  clearInterval(obj.timer); obj.ti ...

随机推荐

  1. jQuery项目赋予Router

    给你的jQuery项目赋予Router技能吧   现在你不会React/Vue都不好意思说自己是前端,不过我相信很多前端项目还是基于jquery类库的传统模式的,假如你有追求的态度使用过require ...

  2. 2018 Arab Collegiate Programming Contest (ACPC 2018) E - Exciting Menus AC自动机

    E - Exciting Menus 建个AC自动机求个fail指针就好啦. #include<bits/stdc++.h> #define LL long long #define fi ...

  3. ref:Spring JdbcTemplate+JdbcDaoSupport实例

    ref:https://www.yiibai.com/spring/spring-jdbctemplate-jdbcdaosupport-examples.html 在Spring JDBC开发中,可 ...

  4. Javascript中Object常用方法学习

    1.Object.assign 函数(对象)(JavaScript) 将来自一个或多个源对象中的值复制到一个目标对象.语法: Object.assign(target, ...sources ); 此 ...

  5. kafka配置监控和消费者测试

    概念 运维 配置 监控 生产者与消费者 流处理 分区partition 一定条件下,分区数越多,吞吐量越高.分区也是保证消息被顺序消费的基础,kafka只能保证一个分区内消息的有序性 副本 每个分区有 ...

  6. ubantu18.04下Hadoop安装与伪分布式配置

    1  下载 下载地址:http://mirror.bit.edu.cn/apache/hadoop/common/stable2/ 2 解压 将文件解压到 /usr/local/hadoop cd ~ ...

  7. NOIP练习赛题目6

    长途旅行 难度级别:A: 运行时间限制:3000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 JY 是一个爱旅游的探险家,也是一名强迫症患者.现在JY 想要在C ...

  8. Kruskal 模板

    最小生成树指的是在图上面找到权值最小的一棵树,并且保证图上所有的点都在这棵树上. 解决办法:Kruskal 算法(贪心思想) 将边按权值从小到大排序,然后按这个顺序不断连边,直到所有点联通. /** ...

  9. Node.js数据库连接池操作通用工具(MySQL模块)

    出处:OSN开源站点数据库通用工具类,OSN源代码地址,https://github.com/obullxl/osnode-site,百度云演示站点,http://obullxl.duapp.com使 ...

  10. 使用CefSharp在.Net程序中嵌入Chrome浏览器(六)——调试

    chrome强大的调试功能令许多开发者爱不释手,在使用cef的时候,我们也可以继承这强大的开发者工具. 集成调试: 我们可以使用如下函数直接使用集成在chrome里的开发者工具 _chrome.Sho ...