svg 图形绘制

最新推荐文章于 2024-05-10 12:42:21 发布

starwmx520

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量831

点赞数 1

分类专栏： svg

svg 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

边框线+内容=元素的总宽、高 
rect:矩形，x y width height 位置和宽高 rx ry 圆角 
circle:圆 cx cy r 圆心x y 圆半径 
cllipse:椭圆 cx cy 圆心x y 圆半径 rx ry 
line:线 x1 y1 开始xy x2 y2结束xy 
polygon:多边形，points=”x,y x,y“ 点的xy 未设置填充时会用线的样式 
plyline:曲线 
path :路径，d为参数。 
M = moveto()将画笔移动到指定的坐标位置 
L = lineto(线的xy)画直线到指定的坐标位置 
H = horizontal lineto 画水平线到指定的X坐标位置 hX 
V = vertical lineto画垂直线到指定的Y坐标位置 vY 
C = curveto 三次贝赛曲线 C X1,Y1,X2,Y2,ENDX,ENDY 
S = smooth curveto 
Q = quadratic Belzier curve 二次贝赛曲线 
T = smooth quadratic Belzier curveto映射 
A = elliptical Arc 弧线 
Z = closepath(关闭路径)

以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

矩形 - rect元素
　　这个元素有6个控制位置和形状的属性，分别是：
x：矩形左上角的坐标(用户坐标系)的x值。
y：矩形左上角的坐标(用户坐标系)的y值。
width：矩形宽度。
height：矩形高度。
rx：实现圆角效果时，圆角沿x轴的半径。
ry：实现圆角效果时，圆角沿y轴的半径。
比如上面例子中，实现了圆角效果，你也可以通过设置rx,ry为不同的值实现椭圆角效果。

圆 - circle元素
　　这个元素的属性很简单，主要是定义圆心和半径：
r：圆的半径。
cx：圆心坐标x值。
cy：圆心坐标y值。

椭圆 - ellipse元素
　　这个是更加通用的圆形元素，你可以分别控制半长轴和半短轴的长度，来实现不同的椭圆，很容易想到，当两个半轴相等时，就是正圆形了。
rx：半长轴(x半径)。
ry：半短轴(y半径)。
cx：圆心坐标x值。
cy：圆心坐标y值。

直线 - line元素
　　直线需要定义起点与终点即可：

x1：起点x坐标。
y1：起点y坐标。
x2：终点x坐标。
y2：终点y坐标。

折线 - polyline元素
　　折线主要是要定义每条线段的端点即可，所以只需要一个点的集合作为参数：

points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。

多边形 - polygon元素
　　这个元素就是比polyline元素多做一步，把最后一个点和第一个点连起来，形成闭合图形。参数是一样的。
points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。

路径 - path元素
　　这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：
d：一系列绘制指令和绘制参数(点)组合成。

　　绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。

绝对坐标绘制指令
　　这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0)，则下面的绝对坐标指令代表的含义如下所示：

指令	参数	说明
M	x y	将画笔移动到点(x,y)
L	x y	画笔从当前的点绘制线段到点(x,y)
H	x	画笔从当前的点绘制水平线段到点(x,y0)
V	y	画笔从当前的点绘制竖直线段到点(x0,y)
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	画笔从当前的点绘制一段圆弧到点(x,y)
C	x1 y1, x2 y2, x y	画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S	x2 y2, x y	特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q	x1 y1, x y	绘制二次贝塞尔曲线到点(x,y)
T	x y	特殊版本的二次贝塞尔曲线(省略控制点)
Z	无参数	绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。

　　移动画笔指令M，画直线指令：L，H，V，闭合指令Z都比较简单；下面重点看看绘制曲线的几个指令。

绘制圆弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
　　用圆弧连接2个点比较复杂，情况也很多，所以这个命令有7个参数，分别控制曲线的的各个属性。下面解释一下数值的含义：
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
x,y 是弧终端坐标。
　　前两个参数和后两个参数就不多说了，很简单；下面就说说中间的3个参数：
x-axis-rotation代表旋转的角度，体会下面例子中圆弧的不同：

<path d="M 10,20 L 80,50 M 10,20 H 200 M 10,20 V 120 Z"
style="fill:white;stroke:red;stroke-width:2;"/>

<path d="M 10,20 C 50 50,50 50 100,20 "/>

stroke ：边框 
stroke="red" 设置颜色 
stroke-width 设置宽 
stroke-linecap 设置线两头样式 butt:默认 round:圆头 square:默认方形，超出长度 
stroke-dasharray 设置虚线样式：线长，空长，线长.. 
stroke-linejoin 设置线连接点样式，miter默认，round圆角，bevel切角显示 
填充和边框样式可以写在css里

文本：text 
x,y位置坐标， 
dx,dy xy上的偏移 
text-anchor文本显示方向，其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。｝ 
start表示文本位置坐标(x,y)位于文本的开始处，文本从这点开始向右挨个显示。 
middle表示(x,y)位于文本中间处，文本向左右两个方向显示，其实就是居中显示。 
end表示(x,y)点位于文本结尾，文本向左挨个显示。 
还可以设置文本的填充和轮廓，还有文字样式 

tspan:标签 
它是text的补充，用来渲染区间内文本，只能用在text 或tspan标签内使用。 
x,y用于设置标签文本的绝对坐标值，而不是相对于外部的text。可以给xy设置多个值，空格分开，会应用到每个字符上 
dx,dy用于设置标签文本相对于默认文本位置的偏移，也可设置多个值。 
rotate 设置字的旋转,同样可以设置多个值和每个字符对应。没有对应值的字符将用最后一个数字

有部分转：http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html

starwmx520

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
svg 图形绘制

边框线+内容=元素的总宽、高rect:矩形，x y width height 位置和宽高 rx ry 圆角circle:圆 cx cy r 圆心x y 圆半径cllipse:椭圆 cx cy 圆心x y 圆半径 rx ry line:线 x1 y1 开始xy x2 y2结束xypolygon:多边形，points=”x,y x,y“ 点的xy 未设置填充时会用线的样式
复制链接

扫一扫

专栏目录