HTML5 & CSS3 新手指南：开始使用 SVG（可缩放矢量图形）
5.00/5 (8投票s)
HTML5 & CSS3 新手指南：开始使用 SVG（可缩放矢量图形）
引言
不久前，这张图片在互联网上流传，并成为开发者社区中一个流行的笑话。它象征着一个贫穷、无家可归的人，他为了得到帮助而“为食物编写 HTML”。
快进到 2007 年，W3C 接受了 HTML5 规范作为 HTML 的新工作。HTML5 不仅给 Web 应用程序领域带来了全新的改革，而且几乎在 JavaScript 变得越来越强大和流行的时候及时出现。安特伍德定律，即任何可以用 JavaScript 编写的应用程序最终都将用 JavaScript 编写，也正在成为现实。
尽管 HTML5 规范尚未最终确定，并且各种浏览器都实现了自己的解释版本，但我们看到 Web 开发中的标准化程度越来越高。Web 开发人员配备了新引入的标签和元素。本文将特别讨论 HTML5 标准之一，即可伸缩矢量图形 (SVG)。
那么，什么是 SVG？
SVG 的历史远超 HTML5。W3C 于 1999 年发布了 SVG 的第一个公共草案规范。其标准是基于并借鉴了精确图形标记语言和矢量标记语言的经验。
引用 W3.org 上的官方规范，SVG 被描述为：一种用于在 XML 中描述二维图形的语言。SVG 允许三种类型的图形对象：矢量图形形状（例如，由直线和曲线组成的路径）、图像和文本。
矢量图形基于矢量（也称为路径或笔触），它们通过称为控制点或节点的位置。另一方面，光栅图形图像或位图是一种点阵数据结构，表示通常为矩形网格的像素或颜色点，可通过显示器、纸张或其他显示介质查看。
最基本的 SVG 文件包含以下格式
- 视口大小（将其视为图像分辨率）
- 通过元素进行分组指令 — 元素应该如何分组？
- 使用形状元素进行绘图指令
- 描述每个元素应如何绘制的样式规范。
使用 SVG 有哪些优势？
- SVG 图像可以嵌入到 HTML 文档中并由客户端浏览器渲染，从而减少请求流量负载。
- SVG 对象可以使用动画元素或通过 jQuery 等 JavaScript 库进行动画处理。
- SVG 图像提供恒定的性能。只有当图像分辨率显着增加时，性能才会下降。
- SVG 图像可以在任何分辨率下以高质量打印。
- 您不需要图像编辑器来构建 SVG 图像。因为 SVG 是一种基于 XML 的图像格式，您实际上可以使用任何文本编辑器（我最喜欢的是 Notepad++）。
- 您可以使用 JavaScript 中的 SVG DOM API 完全控制每个元素。
- SVG 是一种 XML 文件格式，这意味着根据每个 Web 浏览器的实现，SVG 文档的可访问性可能比 canvas 元素更好。
它与 Canvas 有何不同？
开发人员经常将 SVG 的用法与另一个 HTML5 功能 Canvas 混淆。尽管两者有时可以用来实现相同的功能（请参阅我之前的文章，其中介绍了使用 canvas 实现蛇和梯子游戏），但在决定使用哪种工具之前，应该考虑几点。
使用 canvas，您没有任何 DOM 节点或元素可供绘制。它完全是在像素上自由格式绘制。而在 SVG 中，您可以原生实现动画和运动，但在 canvas 中则不然，您需要自己使用计时器等实现动画。
如果可访问性是一个问题，HTML 可能比 SVG 更适合，因为它有更多可用于启用和测试可访问性的工具。
应该指出的是，SVG 本身可能不是开发游戏中复杂图形的最佳方式，最好的方法是采用 SVG 与 Canvas 混合使用的方法。
关于如何使用文章或代码的简要说明。类名、方法和属性，任何技巧或窍门。
动手时间：让我们来玩蛇和梯子游戏
对于初学者来说，典型的蛇和梯子是双人游戏，游戏的目标是根据骰子掷出的点数，将自己的棋子从起点（底部方格）移动到终点（顶部方格），分别由梯子和蛇帮助或阻碍。更不用说我小时候玩这个游戏很多次了，所以当听说 HTML5 的功能时，我首先想尝试的就是这个游戏。我之前曾尝试使用 canvas 实现这个游戏。
我从 HTML 文档中的一个空 SVG 标签开始。
<svg id="templateContainer"> </svg>
SVG 元素在 HTML 文档中表示此部分或元素包含 SVG 图像，并应被视为 SVG 图像。SVG 元素中的典型属性是 width 和 height，用于指定其尺寸。我故意将它们在文档 html 中留空。但是，它们在文档就绪事件中使用 jQuery 设置。
$(document).ready(function() {
var dimension = $(window).height() - 100;
$("#templateContainer").height(dimension);
$("#templateContainer").width(dimension);
});
上述代码对大多数人来说应该非常熟悉，它所做的无非是在页面就绪事件期间设置 SVG 元素的 height 和 width 属性。这还表明您可以简单地将其视为您在 HTML 中处理的任何其他元素。
接下来，我想使用 SVG 构建一个包含 100 个矩形的网格。当然，也可以使用标准表格、div 等其他方法来完成此操作。此外，我不想在文档中静态定义 100 个矩形元素。因此，我定义了一个 SVG 矩形元素模板，如下所示
<div class="row"> <div class="col-md-8"> <svg id="templateContainer"> <rect x="0" y="0" width="0" height="0" class="orig"> </rect> </svg> </div> </div>
后来，我使用 jQuery clone 函数创建了 100 个模板矩形的克隆，并分配了不同的随机类以创建花哨的彩色网格。
function drawBoard() {
var squareSize = _winHeight / 10;
var columnNr = 1; var leftToRight = true;
var x = 0; var y = 0; var position = 100;
for (var row = 1; row <= numerOfRows; row++)
{
if (leftToRight)
{
x = 0;
}
else
{
x = $("#templateContainer").width() - squareSize;
}
for (var column = 1; column <= numerOfcolumns; column++)
{
rows[position - 1] = x.toString() + "," + y.toString();
var clonedRect = $(".orig").clone();
clonedRect.attr("x", x);
clonedRect.attr("y", y);
clonedRect.attr("width", squareSize);
clonedRect.attr("height", squareSize);
var rnd = Math.floor(Math.random() * 6) + 1;
var className = "Rect Rect" + rnd.toString();
clonedRect.attr("class", className);
clonedRect.appendTo( "#templateContainer" );
var clonedText = $(".origText").clone();
clonedText.text(position.toString());
clonedText.attr("x", x + 30);
clonedText.attr("y", y + 30);
clonedText.attr("class", "text");
clonedText.appendTo( "#templateContainer" );
if (leftToRight)
{
x += squareSize;
}
else
{
x -= squareSize;
}
position--;
}
y += squareSize;
leftToRight = !leftToRight;
}
$( ".orig" ).remove();
$( ".origText" ).remove();
drawLadders();
}
元素的 width 和 height 属性定义矩形的高度和宽度。您可以使用 style 属性来定义矩形的 CSS 属性。或者，您可以使用 CSS 类来定义样式，如上面的示例所示。
SVG 中还可以使用其他预定义形状
- 圆
- 椭圆
- Line
- Polyline
- Polygon
- Path
在理想的游戏中，蛇和梯子是绘制出来的。我决定使用向上和向下的箭头来代替蛇和梯子。红色箭头代表蛇，白色箭头代表梯子。
<line x1="0" y1="0" x2="200" y2="200" class="origLine"/>
该元素用于创建一条线。x1 属性定义了线上 x 轴的起点。y1 属性定义了线上 y 轴的起点。x2 属性定义了线上 x 轴的终点。y2 属性定义了线上 y 轴的终点。
我用圆圈装饰了线的末端，以显示方向。这是使用 circle 元素绘制的。
<circle cx="0" cy="0" r="8" stroke="white" stroke-width="3" fill="red" class="origCircle"/>
circle 元素是 SVG 的基本形状，用于根据中心点和半径创建圆。cx 和 cy 属性定义圆心的 x 和 y 坐标。如果省略 cx 和 cy，则圆心设置为 (0,0)。r 属性定义圆的半径
演示
您可以在此处找到此实现的运行演示
结论
考虑到我们最近几年技术变革的广阔性，SVG 对于当今任何 Web 开发人员来说都是一个强大且必要的工具。它不仅使开发更容易，同时还开辟了以前无法在客户端轻松实现的领域。
我在本文中用于演示的蛇与梯子游戏绝不是最佳实践的象征，应仅被视为学习使用 SVG 的各种可用可能性的一种方式。同时，如果您想扩展并进一步发展这个想法，请随时尝试，我很高兴看到它。
感谢您花时间阅读本文，如果您喜欢，请与他人分享。
顺便说一句，您知道有一个很棒的网站 CanIUse.com 吗？您可以在其中查看各种桌面和移动浏览器对各种 HTML5、CSS3、SVG 功能的兼容性。
参考文献和进一步阅读
https://w3schools.org.cn/SVG/svg_intro.asp
http://en.wikipedia.org/wiki/Jeff_Atwood
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
https://mdn.org.cn/en/docs/Web/SVG
https://codeproject.org.cn/Articles/262179/SVG-World-Map