svg的基本图形与属性【小尾巴的svg学习笔记1】
2024-09-13 11:06:57
因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删。
一、基本图形
1、矩形
x,y定义矩形的左上角坐标;
width,height定义矩形的长度和宽度;
rx,ry定义矩形的圆角半径长度,这里注意,如果rx给值了ry没给值,ry沿用rx的值,反之同理;
2、圆形
cx与cy定义圆心的坐标;
r为圆的半径长度;
3、椭圆
x,y依旧为圆心的坐标;
椭圆相较于圆使半径变为两个值,分别为:rx 横向半径和 ry 纵向半径;
4、直线
这个较为简单,x1,y1为起点坐标,x2,y2为终点坐标
5、折线
points:坐标,折线也较为简单,用空格或逗号间隔,依次写下目标点坐标。
6、多边形(闭合折线)
points:坐标,基本与第五的折线相同,唯一不同的是多边形会把最后一个点和起点连接起来
二、属性
1、fill 填充颜色
2、stork 描边颜色
3、stork-width 描边粗细
4、transform 变形,位移(相较于父亲)等
5、opacity 透明度
6、 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
7、 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
做得不够详细,下次会进行补充,希望能对大家有一点点帮助。下一个笔记将会描述在代码里的实际应用。
最新文章
- cocopads命令行
- 整合struts2+hibernate详细配置步骤及注意事项
- JavaScript的json和Array及Array数组的使用方法
- Python—Socket
- 设计模式 命令-Command
- Android:实现退出确认对话框
- 要源码的快来啊,价值500的OA商业源码免费送给大家,望大家年底奖金多多......
- 开始android博客分享
- cocos2dx取真正随机数
- [UE4]创建动画的3中方法
- Navicat for MySQL 安装和破解(完美)
- centOS 6.5下升级mysql,从5.1升级到5.6
- Java将数据库数据导入EXCEL
- tomcat6的编译和导入myeclipse
- 可能是全网首个支持阿里云Elasticsearch Xapck鉴权的Skywalking
- asp.net Core 中间件Hello world
- OpenStack_Swift源代码分析——Ring的rebalance算法源代码具体分析
- glyphicons-halflings-regular.woff2 not found 前台错误修正
- 【MySQL解惑笔记】忘记MySQL数据库密码
- INFO hdfs.DFSClient: Exception in createBlockOutputStream java.net解决办法