1.svg基本形状
2019-04-12 本文已影响0人
琉璃_xin
1.viewBox 定义用户单位
基本上，在 SVG 文档中的1个像素对应输出设备（比如显示屏）上的1个像素，但是这种情况是可以改变的。
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
默认
viewBox属性可以定义画布上可以显示的区域。
viewBox="0 0 150 100" 相对于定义的width="300" height="200"，等于将画面内容放大2倍关系。
<svg version="1.1"
baseProfile="full"
width="300" height="200"
viewBox="0 0 150 100"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
viewBox
2.基本形状
以下图形代码均包含在根元素svg内。
- 矩形
<!--
x: 矩形左上角的x位置
y: 矩形左上角的y位置
width: 矩形的宽度
height: 矩形的高度
rx: 圆角的x方位半径
ry: 圆角的y方位半径
-->
<rect x="10" y="10" width="30" height="20" />
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
rect
- 圆形
<!--
cx: 圆心的x位置
cy: 圆形的y位置
r: 圆的半径
-->
<circle cx="50" cy="50" r="20"/>
circle
- 椭圆
<!--
cx: 椭圆中心的x位置
cy: 椭圆中心的y位置
rx: 椭圆的x半径
ry: 椭圆的y半径
-->
<ellipse cx="50" cy="50" rx="25" ry="10"/>
ellipse
- 线条
<!--
x1: 起点的x位置
y1: 起点的y位置
x2: 起点的x位置
y2: 起点的y位置
-->
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
line
- 折线
<!--
points 点集数列
-->
<polyline points="60 110,80 190,200 100" style="fill:none;stroke:red"/>
polyline
- 多边形
<!--
points 属性定义多边形每个角的 x 和 y 坐标
与折线的区别是自动闭合
-->
<polygon points="100,10 250,180 160,220" style="fill:red;"/>
polygon
- 路径
<!--
path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列
d: 一个点集数列以及其它关于如何绘制路径的信息，采用的是用户坐标系统，不需标明单位
每一个命令都用一个关键字母来表示，每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位（相对于上一个坐标点）
直线命令：
M m 命令是移动画笔位置，但是不画线
M x y
m dx dy
L x y
l dx dy
H，绘制水平线。V，绘制垂直线, 参数均为坐标点不是距离
H x
h dx
V y
v dy
闭合命令：
Z z 闭合路径 不需要区分大小写
Z
z
曲线命令：
三次贝塞尔曲线C，和二次贝塞尔曲线Q
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
S x2 y2, x y (or s dx2 dy2, dx dy)
S命令可以用来创建与前面一样的贝塞尔曲线，但是，如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点
Q x1 y1, x y (or q dx1 dy1, dx dy)
三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线
T x y (or t dx dy)
T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线
弧形：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
rx: x轴半径
ry: y轴半径
x-axis-rotation： x轴旋转角度
large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
x y 最后两个参数来指定终点
-->
<path
d="M 10 10
L 50 50, 20 30
l 30 60
H 100
V 80
C 120 90 ,120 100, 100 120
S 120 80, 100 140,
A 30 50 -45 0 1 215 109
"
style="stroke:pink;stroke-width: 2;fill:none"
/>
二次贝塞尔曲线，来源于慕课网
三次贝塞尔曲线，来源于慕课网
S，来源于MDN
T，来源于MDN
path
