SVG
1、SVG 是一种绘图技术,SVG 的全名叫可缩放矢量图形(Scalable Vector Graphics)。
2、SVG 使用 XML 格式定义图像。
3、可伸缩,不失真。
简单示例:
stroke-width="2" fill="red" />
复制代码
1、SVG的结构
他是标准的 XML 文档结构。
/p>
"/Graphics/SVG/1.1/DTD/svg11.dtd">
stroke-width="2" fill="red" />
复制代码
包括:
1、xml申明。
2、DOCTYPE申明。dtd是一种约束 xml 文件的标准格式。
3、以及一个svg标签包裹的图形描述。
2、嵌入html
第一种:标签
复制代码
第二种:标签
复制代码
第三种:标签
复制代码
最后,也可以使用a标签,链接到svg文件。
View SVG file
复制代码
tips:浏览器是能够直接展示svg的图形的。
区别和优势:
从兼容性考虑,使用object的方式展示svg更好。object不支持js脚本。
从脚本使用的角度考虑,使用 embed 和 iframe 更好一些。
3、svg矩形——rect
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
复制代码
矩形,它的标签是rect。
相关属性:width、height、style、class、x、y、rx、ry。
x、y,分别是svg的矩形,相对svg的偏移距离。
rx、ry 表示给矩形添加圆角。
style 和 class 都是给当前 svg 写样式的。
常见样式属性如下:
.svg {
width: 100px;
height: 100px;
fill: rgb(0,0,255);
stroke-width: 1;
stroke: black;
fill-opacity: 1;
stroke-opacity: 1;
}
复制代码
fill 表示填充颜色。
stroke-width 表示图形边框宽度。
stroke 表示边框颜色。
opacity 表示整个图形的不透明度
fill-opacity 填充颜色的不透明度
stroke-opacity 边框的不透明度
4、svg圆形——circle
他有这么几个属性:
cx、cy 表示圆形的坐标点。
r 表示圆形的半径距离
5、svg椭圆——ellipse
复制代码
cx、cy 表示坐标中心,
rx、ry 表示横坐标轴 和 纵坐标轴。
6、svg直线——line
style="stroke:rgb(255,0,0);stroke-width:2"/>
复制代码
x1、y1 表示起点。
x2、y2 表示终点。
7、svg多边形——ploygon
style="fill:lime;stroke:purple;stroke-width:1"/>
复制代码
fill-rule: nonzero
fill-rule: evenodd
表示对于重合部分的渲染规则!
8、svg曲线——ployline
元素是用于创建任何只有直线的形状
style="fill:none;stroke:black;stroke-width:3" />
复制代码
9、svg路径——path
路径规则
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
复制代码
10、svg文本——text
基本使用:
I love SVG
复制代码
旋转的文本:transform="rotate(30 20,40)"
I love SVG
复制代码
11、svg的stroke属性
stroke,定义颜色。
stroke-width,定义宽度。
stroke-linecap,有 butt、round、square 三种值。
stroke-dasharray,定义虚线。使用特殊的规则。
12、svg滤镜
1、SVG滤镜用来增加对SVG图形的特殊效果。
2、两个标签: 和
3、滤镜,表示一个规则,让你的图形按照你想要的规则展示出来!
4、filter 标签,用来定义一个svg滤镜!
5、所有的svg滤镜,都应该放到defs标签中!
基本示例:
复制代码
说明:
feGaussianBlur,表示定义图形的模糊效果。
in="SourceGraphic",表示这个部分由整个图像创建效果。
stdDeviation,定义了模糊量,表示在原本图形上的伸缩效果。
fitler属性,把当前图形,链接到定义的规则上面。
filter标签的 x 属性:表示横向的压缩。y 属性:表示纵向的压缩。
13、svg阴影——feOffset
feOffset标签,表示形成一个偏移的图形。
feBlend标签,表示与图像相结合的滤镜。或者可以理解为,生成一个原本的图像。
feColorMatrix标签,给元素渲染颜色。
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
复制代码
14、svg线性渐变——linearGradient
linearGradient,表示线性渐变。需要设置四个值:x1、y1、x2、y2。
x表示横向渐变的过程,y表示纵向渐变的过程。
内部,需要两个stop标签,需要设置颜色(style)和位置(offset)。
复制代码
15、svg放射性渐变——radialGradient
radialGradient,定义的是由中心到四周的渐变。
CX,CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆。
复制代码
16、svg参考手册
17、思考和总结(现实应用场景)
SVG绘图,能够绘制一些简单的、有一定规则的图形、并且给这些图形、文本一些滤镜特效。
关于SVG 和 Canvas 的区别。
1、SVG 不能绘制图片,而 canvas 可以。SVG是通过 XML 绘制,而Canvas通过 js 绘制
2、Canvas绘制的方式,是通过 js 逐像素渲染的。也就是说,它绘制一个复杂的图形和一个简单的图形的性能是差不多的。
SVG 是通过 XML 的方式渲染。它的本质是DOM,而复杂的图形,就会降低其渲染性能。
3、Canvas 是依赖分辨率,是一种标量图。所以在放缩的时候,存在失真的问题。
SVG 绘制的时候,不依赖分辨率,是一种矢量图。所以当SVG放缩的时候,不会使得图像失真。
4、SVG 适合带有大型渲染区域的应用程序:比如谷歌地图、百度地图。
Canvas 适合对象密集型的游戏应用场景。