一、矩形
//指定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');
//指定半径画圆
var circle = draw.circle(100);
//修改半径大小
circle.radius(75);
circle.move(50, 50)
三、椭圆形
var draw = SVG('svg1').size(300, 300);
//指定width,height 画椭圆
var ellipse = draw.ellipse(200, 100);
//修改椭圆的半径
setTimeout(function () {
ellipse.radius(75, 100);
ellipse.move(50, 50);
}, 1000);
四、直线
var draw = SVG('svg1').size(300, 300);
//画直线
var line = draw.line(0, 0, 100, 150).stroke({
width: 1
});
//修改直线宽度
line.stroke({
width: 2
});
//获取当前直线的数组
var array = line.array();
console.info(array);
//修改直线,指定数组或字符串
//line.plot(50,30,100,150);
//line.plot('50,30,100,150');
//指定SVG.PointArray 数组
line.plot([
[50, 30],
[100, 150]
]);
var points = new SVG.PointArray([
[50, 30],
[100, 150]
]);
//line.plot(points);
//使用动画,直线的位置移动3秒
line.animate(3000).plot(points);
更多:
SVG.js 基础图形绘制整理(一)的更多相关文章
-
SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
-
Matlab绘图基础——图形绘制的插值  以及 图像大小的重采样
使用说明:图形绘制时的插值 interp1 %1-D data interpolation interpft %使用fft算法插值 %将原数据x转换到频率域,再逆转换回来更密集的数据采样 ...
-
Javascript进阶篇——(JS基础语法)笔记整理
根据慕课网学习整理到一起的笔记,把东西整理到一起看起来比较方便 什么是变量字面意思:变量是可变的量:编程角度:变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可 ...
-
Matlab绘图基础——图形绘制的插值
interp1 %1-D data interpolation interpft %使用fft算法插值 %将原数据x转换到频率域,再逆转换回来更密集的数据采样点 spline %一 ...
-
JS基础知识再整理..........不断更新中
1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...
-
js基础的知识整理
一.操作样式: .style 操作行间样式 .className 修改class 二.操作属性 1. . 更简单,操作已有的属性 2. [] 更灵活,点能做的,方括号都能做.方括号中放的是字符串 ...
-
SVG.js 文本绘制整理
1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...
-
SVG.js 颜色渐变使用
一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...
-
Svg.js 图片加载
一.SVG.Image 1.创建和修改图片 var draw = SVG('svg1').size(300, 300); //SVG.Image 加载图片文件 var image = draw.ima ...
随机推荐
-
Erlang C1500K长连接推送服务-内存
上篇 Erlang C1500K长连接推送服务-性能 提到:150w连接,使用了23GB内存,每个连接占用15KB,约一半是内核使用. 大概分析一下: 1. Erlang 节点 12GB,内部因为有内 ...
-
J2EE项目修改编码问题
一:项目编码修改 新建项目后,右键项目-->Properties-->Resource,这时可以修改编码为UTF-8. 二:JSP页面编码修改 Window --> Preferen ...
-
leetcode刷题笔记
(1)Best Time to Buy and Sell Stock Total Accepted: 10430 Total Submissions: 33800My Submissions Say ...
-
对mysql经常使用语句的详细总结
下面总结的知识点全是经常用的,全都是干货,好好收藏吧. /* 启动mysql */net start mysql /* 连接与断开服务器 */mysql -h 地址 -p 端口 -u 用户名 -p 密 ...
-
C如何获取文件夹下所有文件
http://baike.baidu.com/view/1186290.htm?fr=aladdin 使用io.h中的_findfirst,_findnext,_findclose,_finddata ...
-
PHP简单利用token防止表单重复提交(转)
<?php/* * PHP简单利用token防止表单重复提交 */function set_token() { $_SESSION['token'] = md5(microtime(true)) ...
-
JS中的onclick事件
原文链接:https://segmentfault.com/q/1010000007955542?_ea=1503986 我自己做了一下测试. 这个是在html里面直接绑定onclick事件,我打印了 ...
-
插入mysql失败,因为java数据类型是个实体类,加上.id就好了
错误信息: ### Error updating database. Cause: java.sql.SQLException: Incorrect string value: '\xAC\xED\x ...
-
mysql安装-CentOS6下解压安装mysql-5.7.20-linux-glibc2.12-x86_64.tar.gz
删除已经安装版本 yum list installed mysql [root@localhost ~]# yum list installed mysql Loaded plugins: faste ...
-
随机森林RandomForest
ID3,C4.5决策树的生成: 输入:训练集D,特征集A,阈值eps, 输出:决策树T 若D中所有样本属于同一类Ck,则T为单节点树,将类Ck作为该结点的类标记,返回T: 若A为空集,即没有特征作为划 ...