-

SVG基础知识入门教程

WEB前端

SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。SVG 是属于对图像的形状描述得文本文件,体积较小,放大不会失真,其他图像格式都是基于像素处理的。SVG 文件可以直接插入网页,成为 DOM 的一部分。也可以被img、object、embed、iframe等标签插入网页。SVG 文件也可以在JavaScriptCSS 中使用 。SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。下面雷雪松给大家分享一下SVG基础知识入门教程。

1、SVG文档的元素基本可以分为以下几类:
图形元素:circle, ellipse, line, path, polygon, polyline, rect;
解释元素:desc, metadata, title;
结构元素:defs, g, svg, symbol, use;
渐变元素:linearGradient, radialGradient;
动画元素:animate, animateColor, animateMotion, animateTransform, set;
其他元素:a,altGlyphDef,clipPath,color-profile,cursor,filter,font,fontface,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。

2、SVG 常用元素讲解
a、tspan可以嵌套在的 text 标签中。

1
2
3
4
5
<text x="10" y="30" style="font-size:12pt;">
Switch among
<tspan style="font-style:italic">italic</tspan>, normal,
and <tspan style="font-weight:bold">bold</tspan> text.
</text>

b、textPath让文字可以按照一定的路径任意排放。

1
2
3
4
5
6
<path id="sharp-corner" d="M 30 110 100 110 100 160" style="stroke: gray; fill: none;"/>
<text>
<textPath xlink:href="#sharp-corner">
Making a quick turn
</textPath>
</text>

c、a为文本创建跳转链接

1
2
3
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>

d、rect用于绘制一个矩形。x表示横坐标,y表示纵坐标,width表示宽,height表示高,rx表示圆角的x方位的半径,ry表示圆角的y方位的半径。

1
<rect x="50" y="20" width="150" height="150" rx="10" ry="10"></react>

e、circle(圆) 用于绘制一个圆圈。cx表示圆心横坐标,cy表示圆心纵坐标,r表示半径

1
<circle cx="100" cy="50" r="40"/>

f、 ellipse(椭圆) 用于绘制椭圆。 cx表示圆心横坐标,cy表示圆心纵坐标,rx表示横向半径,ry表示纵向半径

1
<ellipse cx="300" cy="80" rx="100" ry="50"/>

g、 line(直线) 用于绘制一条线。x1起点横坐标,y1表示起点纵坐标,x2表示终点横坐标,y2表示终点纵坐标

1
<line x1="0" y1="0" x2="200" y2="200"/>

h、 polyline(折线) 用于绘制由连接的直线组成的首尾不闭合开放形状。

1
2
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"/>
<!-- 0,40为第一个点 40,40为第二个点 40,80为第三个点 ... -->

i、path(路径) 用于绘制任何路径。path 中 d(data) 属性是用来定义相关线条数据,通常是以 M/m 为起始,代表的就是 move to 的意思。在 path 中,一共可以定义 10 种不同的图形。例如 M/m,L/l。 大家可以注意,每种标识符有两种书写方式,即,大小写。大写: 参照的是绝对坐标,即,SVG 的右上角;小写: 参照的相对坐标,即,前一个点的坐标。

命令 名称 参数
M/m moveto  移动到/启动一个新的子路径(M不会绘制线条) (x y)+
Z closepath  关闭路径 (none)
L/l lineto  画线到 (x y)+
H/h horizontal lineto  水平线到 x+
V/v vertical lineto  垂直线到 y+
A/a elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
C/c curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+
S/s smooth curveto光滑三次贝塞尔曲线到 (x2 y2 x y)+
Q/q Bézier curveto二次贝塞尔曲线到 (x1 y1 x y)+
T/t smooth Bézier curveto光滑二次贝塞尔曲线到 (x y)+

j、viewBox指定坐标系原点的位置以及它的尺寸:x y width height。初始情况下,这个坐标系等同于初始化的视窗坐标系(由SVG图像的width和height确定),而且它的原点是在(0, 0)——即SVG的左上角。通过改变x和y这两个参数的值,可以调整原点的位置。改变width和height的值,可以改变坐标系统的尺寸。

1
2
3
4
<svg width="500" height="200" viewBox="0 0 50 20" >
<rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;"/>
</svg>
<!--x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度;viewport 为 [0,0][500,200],viewbox 为 [0,0][50,20]-->

k、use,该标签就是结合 g 标签一起使用,作用是可以复用 g 分组的样式。

1
2
<g id="Port"><circle style="fill: inherit;" r="10"/></g>
<use x="50" y="30" xlink:href="#Port" class="classA"/>

use标签里面使用 xlink:href 加上指定 group 的 id,然后通过 x,y 属性指定副本放置的位置。不过,有一个限制,use 标签的 style 性,并不能覆盖点原始的 group style 样式。而且,有时候,我们只是想使用一些模板,即,图形并未被解析,只有代码存在。这时候,就需要使用 defs 来包裹了

l、defs用来保存一些代码,使其不会被浏览器解析。并且里面的分组可以被 use 属性的 style 样式所覆盖。

1
2
<defs><g id="Port"><circle style="fill: inherit;" r="10"/></g></defs>
<use x="50" y="50" xlink:href="#Port" style="fill: blue;"/>

m、symbol元素用于定义图形模板(模板可以包含很多图形),这个模板可以被use元素实例化。模板的功能与g元素很相似,都是提供一组图形对象,但是也有一些区别。与g元素不同的地方是:
1.symbol元素本身是不会被渲染的,只有symbol模板的实例会被渲染。
2.symbol元素可以拥有属性viewBox和preserveAspectRatio,这些允许symbol缩放图形元素。
从渲染角度来说,与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素;这些元素不会直接被渲染;他们的使用方式基本都是由use元素去实例化。正是这个原因,对于symbol来说,’display’属性是没有意义的。

1
2
3
4
5
<symbol id="sym01" viewBox="0 0 150 110">
<circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
<circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>
<use href="#sym01" x="0" y="0" width="100" height="50"/>

n、marker 一般是用来画箭头或者线段始末的标识图形。

1
2
3
4
5
6
7
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<polyline points="10,90 50,80 90,20" fill="none" stroke="black"
stroke-width="2" marker-end="url(#Triangle)" />

o、stroke 定义元素的文本,线条或轮廓的颜色。stroke-wdth(边框宽度) 定义任何元素的文本,线条或轮廓的粗细。stroke-linecap 定义不同类型的结束行或任何路径的轮廓,即线条的端点样式。stroke-dasharray:定义 dash 和 gap 的长度。stroke-dashoffset: 用来设置 dasharray 定义其实 dash 线条开始的位置。值可以为 number || percentage。

1
2
3
4
<svg width="600px" height="60px">
<line x1="0" y1="40" x2="600" y2="40" stroke="#000" stroke-width="3" />
<line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3" stroke-dasharray="10 4, 5 10, 1 1, 10 30" stroke-dashoffst="10" />
</svg>

来源:SVG基础知识入门教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注