SVG 英文全称为 Scalable Vector Graphics,意思为可缩放的矢量图。
SVG 通常用于定义用于网络的基于矢量的图形;
SVG 图像可通过文本编辑器来创建和修改;
SVG 图像可被搜索、索引、脚本化或压缩;
SVG 是可伸缩的;
SVG 图像可在任何的分辨率下被高质量地打印;
SVG 可在图像质量不下降的情况下被放大。
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 Canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较:
<rect> </rect>绘制矩形
主要属性 | 主要作用 |
---|---|
x/y | 绘图位置 |
width/height | 矩形长宽 |
fill | 填充颜色,默认黑色 |
stroke | 描边的颜色 |
stroke-width | 描边的宽度 |
rx/ry | 描边的圆角 |
<svg width="500" height="500">
<rect x="100" y="100" width="150" height="100" fill="red" stroke="green" stroke-width="2" rx="10"></rect>// 绘制矩形
</svg>
<circle></circle>绘制圆
属性 | 作用 |
---|---|
cx/cy | 圆绘制的位置,圆心位置 |
r | 圆的半径 |
<svg width="500" height="500">
<circle cx="150" cy="200" r="50"></circle>
</svg>
使用<rect></rect>绘制椭圆
<svg width="500" height="500">
<rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>
使用<ellipse></ellipse>绘制椭圆
属性 | 作用 |
---|---|
cx/cy | 椭圆绘制的位置,圆心的位置。 |
rx/ry | 椭圆的半径 |
<svg width="500" height="500">
<ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
</svg>
从起点回到终点形成多边形
<svg width="500" height="500">
<polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>
关闭路径方法构成多边形
polygon 自动闭合路径
<svg width="500" height="500">
<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>
<deft></deft>标签
我们把所有需要再次使用的引用元素定义在 <defs> 元素里面
优点:这样做可以增加 SVG 内容的易读性和无障碍。在 <defs> 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 <use> 元素呈现这些元素。
<filter></filter>引用滤镜
<svg width="500" height="100">
<defs>
<filter id="blurFilter" y="-5" height="40">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
</filter>
</defs>
<ellipse cx="155" cy="60" rx="25" ry="15" stroke="none" fill="blue" filter="url(#blurFilter)"></ellipse>
</svg>
<feOffset>
<feBlend> 两个标签结合在一起即可创建图形的阴影效果
通过属性 dx 和属性 dy 的值指定一个偏移量。
<svg>
<defs>
<filter id="filter-offset" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
<feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-offset)"></rect>
</svg>
<feGaussianBlur> 通过通过属性 stdDeviation 指定偏移的像素数量。
<svg>
<defs>
<filter id="filter-blur" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-blur)"></rect>
</svg>
<feColorMatrix>为阴影涂上一层颜色svg
<svg>
<defs>
<filter id="filter-matrix" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0
0 0.2 0 0 0
0 0 0.2 0 0
0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-matrix)"></rect>
</svg>