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

时间:2022-09-21 11:41:18

一、矩形

//指定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);

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

二、圆形

var draw = SVG('svg1').size(300, 300);
draw.circle(100).fill('red');
//指定半径画圆
var circle = draw.circle(100);
//修改半径大小
circle.radius(75);
circle.move(50, 50)

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

三、椭圆形

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);

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

四、直线

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 父类的基础操作

Svg.Js A标签,链接操作

Svg.Js 简介(转)

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

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

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

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

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

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

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

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

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

  5. JS基础知识再整理..........不断更新中

    1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...

  6. js基础的知识整理

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

  7. SVG.js 文本绘制整理

    1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...

  8. SVG.js 颜色渐变使用

    一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradien ...

  9. Svg.js 图片加载

    一.SVG.Image 1.创建和修改图片 var draw = SVG('svg1').size(300, 300); //SVG.Image 加载图片文件 var image = draw.ima ...

随机推荐

  1. Erlang C1500K长连接推送服务-内存

    上篇 Erlang C1500K长连接推送服务-性能 提到:150w连接,使用了23GB内存,每个连接占用15KB,约一半是内核使用. 大概分析一下: 1. Erlang 节点 12GB,内部因为有内 ...

  2. J2EE项目修改编码问题

    一:项目编码修改 新建项目后,右键项目-->Properties-->Resource,这时可以修改编码为UTF-8. 二:JSP页面编码修改 Window --> Preferen ...

  3. leetcode刷题笔记

    (1)Best Time to Buy and Sell Stock Total Accepted: 10430 Total Submissions: 33800My Submissions Say ...

  4. 对mysql经常使用语句的详细总结

    下面总结的知识点全是经常用的,全都是干货,好好收藏吧. /* 启动mysql */net start mysql /* 连接与断开服务器 */mysql -h 地址 -p 端口 -u 用户名 -p 密 ...

  5. C如何获取文件夹下所有文件

    http://baike.baidu.com/view/1186290.htm?fr=aladdin 使用io.h中的_findfirst,_findnext,_findclose,_finddata ...

  6. PHP简单利用token防止表单重复提交(转)

    <?php/* * PHP简单利用token防止表单重复提交 */function set_token() { $_SESSION['token'] = md5(microtime(true)) ...

  7. JS中的onclick事件

    原文链接:https://segmentfault.com/q/1010000007955542?_ea=1503986 我自己做了一下测试. 这个是在html里面直接绑定onclick事件,我打印了 ...

  8. 插入mysql失败,因为java数据类型是个实体类,加上&period;id就好了

    错误信息: ### Error updating database. Cause: java.sql.SQLException: Incorrect string value: '\xAC\xED\x ...

  9. mysql安装-CentOS6下解压安装mysql-5&period;7&period;20-linux-glibc2&period;12-x86&lowbar;64&period;tar&period;gz

    删除已经安装版本 yum list installed mysql [root@localhost ~]# yum list installed mysql Loaded plugins: faste ...

  10. 随机森林RandomForest

    ID3,C4.5决策树的生成: 输入:训练集D,特征集A,阈值eps, 输出:决策树T 若D中所有样本属于同一类Ck,则T为单节点树,将类Ck作为该结点的类标记,返回T: 若A为空集,即没有特征作为划 ...