hermanncain 2019-11-17
接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等。
svg是(scalable vector graphic)伸缩矢量图像。
(1)图形元素
(2)文字元素
(3)特殊元素
(4)滤镜元素
(5)渐变元素
矩形使用<rect></rect>标签来进行绘制。
示例图:
代码:
<svg width="200" height="200"> <rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect> </svg>
参数说明:
(1)x:左上角x的坐标,距离左边的距离,相当于margin-left;
(2)y:左上角y的坐标,距离顶部的距离,相当于margin-top;
(3)width:矩形的宽度;
(4)height:矩形的高度;
(5)rx:圆角矩形,x轴方向的半径;
(6)ry:圆角矩形,y轴方向的半径
(7)fill:填充颜色
圆形使用<circle></circle>标签来进行绘制。
示例图:
实例代码:
<svg width="200" height="200"> <circle cx="50" cy="50" r="40" fill="yellow"></circle> </svg>
参数说明:
(1)cx:圆形的x坐标;
(2)cy:圆心的y做标;
(3)r:半径
椭圆形使用标签<ellipse></ellipse>标签进行绘制,与圆形的绘制方法类似。
示例图:
实例代码如下:
<svg width="200" height="200"> <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse> </svg>
参数说明:
cx:圆心的x坐标;
cy:圆心的y坐标;
rx:水平方向上的半径;
ry:垂直方向上的半径
线段使用<line></line>标签进行绘制。
实例代码
<svg width="200" height="200"> <line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line> </svg>
参数说明:
x1:起点的x坐标;
y1:起点的y坐标;
x2:终点的x坐标;
y2:终点的y坐标
折线和多边形的绘制方法类似,都是用points属性设置各个点的坐标。
折线使用标签<polyline></polyline>进行绘制,而多边形使用标签<polygon></polygon>进行绘制,且多边形会将起点和终点连接起来,折线不会。
示例图:
实例代码:
/* 图一 折线,不会将起点与终点连接 */ <svg width="200" height="200"> <polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polyline> </svg> /* 图二 多边形,将起点与终点连接 */ <svg width="200" height="200"> <polygon points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polygon> </svg>
参数说明:
ponits:设置各个点的坐标,各组坐标之间使用空格分隔,x坐标和y坐标之间使用逗号分开。
路径使用标签<path></path>进行绘制,使用d属性控制路径的类型和绘制。路径的功能最多,前面的所有图形都可以使用路径进行绘制。
d属性值的书写有两种,使用逗号分隔坐标,如:d="M10, 10",也可以使用空格的形式,如:d="M 10 10"
注意:大写字母:表示坐标系中使用绝对坐标,小写字母:使用相对坐标(相对当前画笔所在的点)
M:moveto,将画笔移动到指定坐标,如:d="M10,10",表示将画笔移动到坐标(10,10)的位置。
示例图:
实例代码:
<svg width="200" height="200"> <path d="M 10 10 L 180 180" stroke="#fb3" stroke-width="4" fill="transparent"></path> </svg>
L:lineto,绘制直线到指定坐标,如:d="M 10 10 L 80 80",表示绘制一条起点坐标为(10,10),终点坐标为(80,80)的直线。
H:horizontal lineto,绘制水平直线到指定坐标,如:d="M 10 10 H 100",表示是绘制一条起点坐标为(10,10),终点坐标为(100,10)的直线,注意:H只需要设置一个值,如果设置了多个值,则最后取最后一个值。
V:vertical,绘制垂直直线到指定坐标,如:d="M 10 10 V 100",表示绘制一条起点坐标(10,10),终点坐标为(10,100)的直线,注意:V只需要设置一个值,如果是多个值,则取最后一个值。
C:curveto,绘制三次方贝塞尔曲线到终点坐标,中间经过两个控制点控制曲线的弧度,所以需要制定三个坐标来实现绘制曲线,如:d="M10,10 C40,5 40,140 100,100"
S:shorthand/smooth curveto,绘制平滑三次方贝塞尔曲线到终点坐标,与上一条三次方贝塞尔曲线相连,第一个控制点为上一条曲线第二个控制点的对称点,所以还需制定一个控制点坐标和终点坐标。如:d="M10,10 C40,5 40,140 100,100 S140,180 160,160",如果不与贝塞尔曲线相连,即:d="M10,10 S140,180 160,160",则绘制的图线接近于二次贝塞尔曲线
Q:quadratic Bezier curveto,绘制二次贝塞尔曲线到终点坐标,中间经过一个控制点控制曲线的弧度,如:d="M10,10 Q40,140 100,100"
T:shorthand/smooth quadratic Bezier curveto,绘制平湖二次贝塞尔曲线到终点坐标,与上一条二次贝塞尔曲线相连,控制点为上一条曲线控制点的对称点,所以还需指定一个终点坐标,如:d="M10,10 Q40,140 100,100 T160,160",如果不与贝塞尔曲线相连,即:d="M10,10 T160,160",则绘制的图线是一条直线。
示例图:
实例代码:
/* 图一 三次方贝塞尔曲线 */ <svg width="200" height="200"> <path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path> </svg> /* 图二 三次方贝塞尔曲线,与上一条曲线相连 */ <svg width="200" height="200"> <path d="M10,10 C40,5 40,140 100,100 S140,180 160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path> </svg> /* 图三 二次贝塞尔曲线 */ <svg width="200" height="200"> <path d="M10,10 Q40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path> </svg> /* 图四 二次方贝塞尔曲线,与上一条曲线相连 */ <svg width="200" height="200"> <path d="M10,10 Q40,140 100,100 T160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path> </svg>
A:el liptical arc,绘制椭圆曲线到指定坐标,需设置的参数有:
(1)rx,ry:x轴方向半径,y轴方向半径;
(2)x-axis-rotation:x轴与水平顺时针方向夹角;
(3)large-arc-flag:角度弧线大小(1:大,0:小);
(4)sweep-flag:绘制方向(1:顺时针,0:逆时针);
(5)x y:终点坐标
示例图:
实例代码:
<svg width="500" height="500"> <path d="M50,50 A60 30 0 1,0 150,50 Z" stroke="#fb3" stroke-width="4px" fill="transparent"></path> </svg>
分析:起点坐标(50,50),终点坐标(150,50),角度为0,角度弧线大小large-arc-flag为1,选择大弧度,根据分析,即选择红色的弧线,又绘制方向sweep-flag为0,为逆时针,即从起点沿着逆时针方向绘制到终点,所以是红色虎先位于下方。
注意:当 (起点与终点之间的直线距离/2) > (椭圆的水平半径) 时,角度为0的情况下,此时椭圆会等比放大,到相等为止。
Z:closepath,绘制直线将终点与起点连接
再次提醒:大写字母:表示坐标系中使用绝对坐标,小写字母:使用相对坐标(相对当前画笔所在的点)
在svg中使用<text></text>标签绘制文字。
参数说明:
x:文字的x坐标;
y:文字的y坐标;
dx:相对于当前位置x方向的距离;
dy:相对于当前位置的y方向的距离;
textLength:文字的显示长度;
rotate:旋转角度,也可以使用transform="rotate(30)"
示例图:
实例代码:
<svg width="200" height="200"> <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text> </svg>
如果要实现文字沿着路径进行排列,可使用<textPath></textPath>标签来实现。需要提前定义好路径path,并指定id,textPath使用xlink:href定义文字要匹配的路径。
示例图:
实例代码:
<svg width="600" height="600"> <path id="textPath1" d="M100,100 C140,50 140,240 200,200 S240,280 360,360" stroke="#fb3" stroke-width="4px" fill="transparent"></path> <text x="10" y="10" dx="-10" dy="-10" rotate="20"> <textPath xlink:href="#textPath1" textLength="300"> 很扭曲的测试示例文字 </textPath> </text> </svg>
use标签用来克隆其他元素,克隆后的元素不能修改样式。 示例图:
示例代码:
<svg> <rect id="rect1" x="10" y="10" width="100" height="100" stroke="#5588aa" stroke-width="5" fill="transparent" ></rect> <use x="20" y="20" xlink:href="#rect1"></use> </svg>
参数说明:
x:相对被克隆元素x轴偏移量;
y:相对被克隆元素y轴偏移量;
xlink:href:指向被克隆元素的ID
symbol标签用定义模版,需要结合use标签使用,模版在未被使用之前,不会展示在页面上。模版内部可包含多个元素
示例代码:
<svg> <symbol id="template1"> <rect x="10" y="10" width="100" height="100" stroke="#5588aa" stroke-width="5" fill="transparent" ></rect> </symbol> <use x="20" y="20" xlink:href="#template1"></use> </svg>
group的简写,用来创建分组,组内所有的元素都会继承g的属性,可以嵌套使用,也可以和use标签结合使用。另外可使用transform属性定义控制整个组的位置。
示例代码:
<svg> <g stroke="#5588aa" stroke-width="5" fill="transparent"> <rect x="10" y="10" width="100" height="100"></rect> <rect x="120" y="120" width="100" height="100"></rect> </g> </svg>
g标签内部的两个矩形,都会继承g标签的样式。
lipPath元素主要用来剪裁元素,clipPath元素定义范围外的内容将不会被展示。另外要注意写在<clipPath></clipPath>标签内部的元素不会被显示,clipPath标签需要放在defs标签内。其他元素在引用clipPath元素时,需要使用clip-path="url(#ID)"。
示例代码:
<svg height="200" width="200"> <defs> <clipPath id="clip"> <rect width="100" height="100"></rect> </clipPath> </defs> <circle cx="90" cy="90" r="90" clip-path="url(#clip)" stroke="none" fill="yellow" /> </svg>
分析图:
最终效果图:
【谢谢关注和阅读,后续新的文章首发:sau交流学习社区:https://www.mwcxs.top/】