HTML5 SVG API及实例 SVG的特点

来源：互联网发布：nginx 去除版本号编辑：程序博客网时间：2024/04/28 16:22

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

推荐通过引用 SVG 的命名空间，就能够把 SVG 元素之间添加到 HTML 代码中，

<html xmlns:svg="http://www.w3.org/2000/svg"><body><p>This is an HTML paragraph</p><svg:svg width="300" height="100" version="1.1" ><svg:circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" /></svg:svg></body></html>

<rect>标签：用来创建矩形，以及矩形的变种。
```
<h2>矩形</h2> <svg> <rect x="0" y="0" width="50px" height="50px"  style="fill: green;stroke: black;stroke-width:5px;opacity: 0.5" /> </svg>
```
代码解释：
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
<circle> 标签：可用来创建一个圆。
```
<h2>画圆</h2> <svg> <circle cx="60" cy="60" r="50" fill="green" stroke="black" stroke-width="2px" /> </svg>
```
```
<h2>圆角矩形</h2> <svg> <rect x="10" y="10" rx="30" ry="10" width="100px" height="50px"  style="fill: green;stroke: black;stroke-width:2px;opacity: 1" /> </svg>
```
代码解释：
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。rx 和 ry 属性可使矩形产生圆角。CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1），stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）。
<ellipse> 标签：可用来创建椭圆。
```
 <h2>椭圆</h2> <svg> <ellipse cx="105" cy="60" rx="100" ry="50" fill="green" stroke="black" stroke-width="2px "/> </svg>
```
代码解释：
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
<line> 标签：用来创建线条。
```
<h2>画线：</h2> <svg id="s1"> <line x1="0" y1="0" x2="50" y2="50" style="stroke: red;stroke-width: 2px" /> </svg>
```
代码解释：
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
<polygon> 标签：用来创建含有不少于三个边的图形。
```
<h2>多边形</h2> <svg> <polygon points="100,20 150,100 50,50" fill="green" stroke="black" stroke-width="2px " /> </svg>
```
代码解释：
points 属性定义多边形每个角的 x 和 y 坐标

<polyline> 标签：用来创建仅包含直线的形状。

<h2>折线</h2> <svg> <polyline points="0,0 20,20 40,0 60,20 80,0" style="fill:green;stroke:red;stroke-width:2"/> </svg>

这里注意如果想得到细线条的效果，填充颜色fill应该与背景色一致。

SVG 滤镜用来向形状和文本添加特殊的效果。这里举一个例子：

<h2>滤镜 高斯模糊</h2>                                                                                                                 <svg><defs><filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="2" /></filter></defs><ellipse cx="200" cy="150" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/></svg>

<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？

<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

最后是canvas与svg的区别： SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

本文主要参考文档

阅读全文

0 0

HTML5 SVG API及实例 SVG的特点

什么是SVG？

SVG 的优势

代码解释：

<h2>圆角矩形</h2> <svg> <rect x="10" y="10" rx="30" ry="10" width="100px" height="50px" style="fill: green;stroke: black;stroke-width:2px;opacity: 1" /> </svg>代码解释：

代码解释：

代码解释：

代码解释：

最后是canvas与svg的区别： SVG

Canvas

Canvas 与 SVG 的比较

Canvas

SVG

<h2>圆角矩形</h2> <svg> <rect x="10" y="10" rx="30" ry="10" width="100px" height="50px" style="fill: green;stroke: black;stroke-width:2px;opacity: 1" /> </svg>

代码解释：