HTML5 新元素之 svg
SVG（Scalable Vector Graphics）指可伸缩矢量图形，通常在 html 中使用 xml 格式来定义用于网络的基于矢量的图形。使用 svg 定义的矢量图形在放大或改变尺寸的情况下其图形的质量不会受到损伤。
SVG 图像与其他图像格式（JPEG 或 GIF）相比的优势在于：SVG 图像可通过文本编辑器来创建和修改；SVG 图像可被搜索、索引、脚本化或压缩；SVG 图像是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；SVG 图像质量不受放大或缩小的改变。
svg 与 canvas 的区别：
| svg | canvas |
|---|---|
| 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用 | 依赖分辨率 不支持事件处理器 文本渲染能力较弱 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，比如频繁绘制某些对象图像 |
svg 与 canvas 一样，都是一种用来绘制 2D 图形的语言，不同的是 svg 是使用 xml 格式的文件来描述图形的，而 canvas 是通过 JavaScript 来描述的。在 svg 中，每个被绘制的图形均被视为对象。如果 svg 对象的属性发生变化，那么浏览器能够自动重现图形。canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
svg 矩形
svg 的
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
rx 和 ry 属性可使矩形产生圆角
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
CSS 的 opacity 属性定义元素透明度（合法的范围是：0 - 1）
如，定义一个边框为绿色，边框宽度为 5px，大小为 300 * 100px 且使用红色填充的 svg 图像。
svg 矩形
除此之外，还可以使用 svg 来创建圆角的矩形，如：
svg 圆角矩形
svg 圆形
svg 的
circle 元素的 cx 属性定义圆形图像原点坐标的 x 轴坐标
cy 属性定义圆形图像原点坐标的 y 轴坐标
r 属性定于圆形图像的半径大小, 单位为 px
stroke 属性用来定义圆形边框线条颜色
stroke-width 属性用来定义圆形边框的宽度
fill 属性用来定义圆形的填充颜色
svg 圆形
其中，cx 和 cy 属性如果不设置的话会默认原点坐标为 (0, 0)。也就是说虽然是使用的
svg 椭圆
ellipse 元素的 cx 属性定义椭圆中心的 x 轴坐标
cy 属性定义椭圆中心的 y 轴坐标
rx 属性定义椭圆的水平半径, 即 x 轴上的半径
ry 属性定义椭圆的垂直半径, 即 y 轴上的半径
style 属性用来定义 css 相关样式
css 的 fill 属性定义椭圆的填充颜色
css 的 stroke 属性定义椭圆边框的颜色
css 的 stroke-width 属性定义椭圆边框的线条宽度
svg 椭圆
还有一种特殊情况，在矩形、圆形等图形中都会出现。是因为
又如，通过两个颜色不相同的椭圆来构建一个椭圆环：
svg 直线
line 元素的 x1 属性定义直线的起点坐标的 x 坐标
y1 属性定义直线的起点坐标的 y 坐标
x2 属性定义直线的结束坐标的 x 坐标
y2 属性定义直线的结束坐标的 y 坐标
svg 直线
同时我们也可以看到，可以使用多个
svg 多边形
polygon 元素的 points 属性定义多边形每个角的 x 和 y 坐标，定义格式为：points="x1,y1 x2,y2 x3,y3 ......"。
style 属性定义了 css 的样式列表
css 的 fill 属性定义了多边形的填充颜色
css 的 stroke 属性定义了多边形边框的颜色
css 的 stroke-width 属性定义了多边形边框的宽度
css 的 fill-rule 属性定义多边形的填充规则（该属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部”，内部区域会被填充。支持 nonzero 和 evenodd 两种取值，具体的判断逻辑可参考：SVG 多边形 | 菜鸟教程 fill-rule 的默认取值为 nonzero）
svg 多边形
使用 nonzero 填充规则
使用 evenodd 填充规则
除此之外，svg 还可通过
本文涉及到的所有代码如下：
// 矩形
HTML SVG 示例
svg 矩形
svg 圆角矩形
// 圆形
HTML SVG 圆形示例
svg 圆形
svg 默认原点圆形
// 椭圆
HTML SVG 椭圆示例
svg 椭圆
// 直线
HTML SVG 直线示例
svg 直线
// 多边形
HTML SVG 多边形示例
svg 多边形
使用 nonzero 填充规则
使用 evenodd 填充规则
本文参考自：SVG 教程 | 菜鸟教程
HTML5 SVG | 菜鸟教程
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！