svg初学——形状
来源:互联网 发布:荥阳网络推广wang1314 编辑:程序博客网 时间:2024/05/16 15:30
矩形
rect 标签
- 该标签可用来创建矩形,以及矩形的变种
- 例子
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/></svg>
注释:
- 从左侧20处,顶端20处开始
- rx、ry使矩形产生圆角
- 设置rect元素250宽,100高
- 红色填充,颜色也可以用rgb
- 黑色描边,边的宽度为5
- 整体透明度为0.5;也可以
fill-opacity:0.1;
stroke-opacity:0.9;
这样分开写
圆形
- circle标签可用来创建一个圆
例子
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
注释:
- 其余部分同上
- x坐标从100,y坐标从50,半径是40
- 如果省略cx cy,自动为0 0
椭圆
- ellipse标签 与圆不同之处在于有不同的x、y半径
例子
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
注释:rx水平半径,ry垂直半径
线条
- line标签 创建线条
例子
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
注释:x1 y1表示线条起点坐标,x2 y2表示终点坐标
多边形
- polygon标签 创建含有不少于三个边的图形
例子
<polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
注释:points表示每个角的坐标
折线
- ployline标签 创建仅包含直线的形状
例子
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
注释:points表示每个拐角处的坐标,包括起点和终点;fill表示起点和终点连起来和折线构成的封闭区域,默认为黑色
路径
- 标签path
- 下面的命令可用于路径数据
- M = moveto 路径起始点坐标
- L = lineto 当前节点到指定(x,y)节点,直线连接
- H = horizontal lineto y坐标不变,x轴移动到x, 形成水平线
- V = vertical lineto x坐标不变,y轴移动到y, 形成垂直线
- C = curveto 三次贝塞尔曲线
- C x1 y1, x2 y2, x y
- 前两个是控制点,是看不见的。第三个是曲线到达的终点,即虚虚实。
- S = smooth curveto 光滑三次贝塞尔曲线
- S x2 y2, x y
- 因为会根据前面C中的第二个控制点自动对称补全一个控制点
- 称作 厕所大仙
- Q = quadratic Belzier curve 二次贝塞尔曲线
- Q x1 y1, x y
- 第一个是控制点
- T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线
- Q x y
- 同光滑3次一样
- 称作切图大仙
- A = elliptical Arc 椭圆弧
- Z = closepath 将路径的开始和结束点用直线连接
注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
例子
<path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314C142 314 131 322 131 334C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/>
path中贝塞尔曲线的学习
阅读全文
0 0
- svg初学——形状
- svg初学——滤镜
- svg初学——渐变
- svg初学
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
- SVG 形状_矩形
- SVG 形状_圆
- SVG 形状_椭圆
- SVG 形状_线条
- SVG 形状_多边形
- SVG 形状_折线
- SVG 形状_路径
- svg 鼠标形状 小手
- SVG中的形状支持
- svg 鼠标形状 小手
- SVG 形状
- 什么是SVG和SVG常用的形状
- (六)-class文件结构
- 帮同学参加数学建模做的求点集间最短距离,时间复杂度300*300
- 交换两个数组的内容
- Android单点登录,互踢下线代码实现
- js字符串
- svg初学——形状
- javascript日期
- 多线程与线程池总结
- <Python高级全栈开发工程师-1>学习过程笔记【181-184】正则表达式 <特殊字符><函数>
- 用 java 判断 括号是否完全匹配
- 关于对多项式的两种表示法的初步理解
- <python全栈开发基础>学习过程笔记【17d】生成器
- 315. Count of Smaller Numbers After Self(divide and conquer)
- Springboot多数据源配置--数据源动态切换