svg 使用笔记
来源:互联网 发布:java gb2312转utf8 编辑:程序博客网 时间:2024/06/05 01:13
使用path标签时,就像用指令的方式来控制一只画笔,比如:移动画笔到某一坐标位置,画一条线,画一条曲线,完事了抬起画笔,OVER!
path支持的指令有:
M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径
其中蓝色的指令是我常用的,绿色的目前为止还没有用到
一、说明:
坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。
所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个
二、指令
1、L H V指令
M 起点X,起点Y L(直线)终点X,终点Y H(水平线)终点X V(垂直线)终点Y
如:M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90
2、A指令
允许不闭合。可以想像成是椭圆的某一段,共七个参数:
A RX,RY,XROTATION,FLAG1,FLAG2,X,Y
RX,RY指所在椭圆的半轴大小
XROTATION指椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
FLAG1只有两个值,1表示大角度弧线,0为小角度弧线。
FLAG2只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针
X,Y为终点坐标
如:m 200,250 a 150,30 0 1 0 0,70
- svg 使用笔记
- SVG使用
- SVG使用
- svg基础学习笔记
- svg学习笔记(一)
- svg笔记(一)
- Svg 学习笔记
- SVG学习笔记
- SVG与perl SVG学习笔记
- SVG 中使用 JavaScript
- svg.js的使用
- 使用Batik操作SVG
- 使用SVG画猫咪
- android5.0使用svg
- 使用SVG图片格式
- 使用SVG图片格式
- 使用SVG制作热区图
- svg简单使用
- 首页漂浮图片,保存称html即可看效果
- winform将List写入txt
- 洛谷 P3765 总统选举(线段树+treap)
- FaceBook高效工作十个原则图
- yum安装MariaDB(使用国内镜像快速安装,三分钟安装完毕)
- svg 使用笔记
- 给JEDIS打了一个patch,使其支持多主访问模式
- Spring基础学习教程(Spring配置文件详解)-03
- 自己设计的棋类游戏
- 在select parameterType自定义类型嵌套循环List数据
- 阿里云Ubuntu服务器实现两结点SSH免密码通信
- Android新特性介绍,ConstraintLayout完全解析
- 如何使linux用户下次登录强制修改密码
- IEEE 2017视频