【SVG】SVG基础—创建简单的图形和线条

上周我开始了SVG的系列探讨，并通过不同的方法将SVG嵌入到HTML页面中。因为需要让示例能够在你的屏幕上显示，所以我创建了一个绿色的矩形。

创建矩形的代码并不难理解，我并不打算详细讲解，所以现在来讲一下你能够创建的其它形状吧。我之前有大概介绍了一些简单的SVG图形，但是我觉得我还是需要把它们再过一遍，因为我之前理解得也不够全面，所以再复习一遍也可以帮助我更好地理解。

SVG图形和线条

SVG有如下这些预定义的基础图形：

• 矩形 <rect>

• 圆形 <circle>

• 椭圆 <ellipse>

• 线条 <line>

• 折线 <polyline>

• 多边形 <polygon>

因为我们上星期已经用过矩形了，所以我们就从它开始讲起吧。

注意：我会在这个系列的下一篇文章中讲解填充和描边，但是在这篇文章中我需要提前用到它们，因为这样才可以看到你所创建的SVG图形。我会尽量讲得简明易懂，以确保你们都能跟上进度。

矩形 <rect>

SVG的 <rect> 元素定义了一个矩形，你可以通过添加几个属性来控制它的大小、颜色和边角圆角等。

<svg width="300px" height="150px">
  <rect x="20" y="20" width="250px" height="125px" rx="5" ry="5" fill="teal" />
</svg>

• x——定义矩形左上角的点的x坐标

• y——定义矩形左上角的点的y坐标

• rx——定义矩形四个圆角的x半径

• ry——定义矩形四个圆角的y半径

• width——定义矩形的宽度

• height——定义矩形的高度

如果没有对单位进行特别说明的话，不论你设置的是位置还是尺寸大小的值，单位都是一样的，默认是px。

注意：这篇文章中的图像都是内联SVG。我有想过要使用.png格式的图像，但是考虑到对SVG的支持，我还是决定只使用SVG。

你应该注意到了我在 <svg> 这个根元素内添加了width和height的属性，我之后会讲到这点。现在你只需要知道，如果你的SVG图形可能会被剪裁，你可以在<svg> 元素中添加和被剪裁的图形相同甚至大一些的width和height属性，来防止它被剪裁。

圆形 <circle>

圆形比较容易创建。你只需要设置圆心的坐标，还有半径，就可以创建出一个圆了。

<svg width="300px" height="300px">
  <circle cx="150" cy="150" r="100" fill="red" />
</svg>

• cx——圆心的x坐标

• cy——圆心的y坐标

• r——圆的半径

椭圆 <ellipse>

椭圆相比圆形，和矩形相比正方形，是同样的。定义椭圆我们只需要在圆形的基础上增加一个属性。

<svg width="300px" height="300px">
  <ellipse cx="150" cy="150" rx="100" ry="75" fill="blue" />
</svg>

• cx——椭圆中心点的x坐标

• cy——椭圆中心点的y坐标

• rx——定义椭圆的水平半径

• ry——定义椭圆的垂直半径

因为椭圆的半径在x轴和y轴上有不同的半径，即rx和ry，与圆形的半径r相对应。其实创建椭圆也并不比创建圆形或者矩形难。

线条 <line>

如果你使用CSS只是用来创建矩形、圆形或者椭圆，可能会觉得图形并没有什么好玩的。在CSS中创建线条，而且并不仅是水平线或者垂直线，相对会难一点。但是还是可以创建的，只不过它不仅是SVG的line元素那么简单。

<svg width="300px" height="250px">
  <line x1="100" y1="200" x2="250" y2="50" stroke="#000" stroke-width="5" />
</svg>

• x1——定义直线起点的x坐标

• y1——定义直线起点的y坐标

• x2——定义直线终点的x坐标

• y2——定义直线终点的y坐标

同样的，这也是相对简单的，你只需要定义线条的起点和终点，然后各个浏览器都会帮你做好计算，创建出实际的直线。

因为线条没办法进行填充，所以我使用了stroke和stroke-width属性，来设置描边和描边的宽度。下周我会一起讲解一下描边（以及fill填充属性）。

折线 <polyline>

折线是一组相互连接的直线集合。使用SVG创建折线，你需要使用points这个属性，来定义你需要的任意数量的坐标点。

<svg width="300px" height="300px">
  <polyline points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="none" stroke="#000"/>
</svg>

上面的代码有几点需要注意。首先每一组坐标点都使用一个逗号分隔，另外除了第一个点和最后一个点，每个坐标点都代表一条线段的起点以及另一条线段的终点。

其次，你会发现这个例子总我设置了fill属性为none。如果我没有这样设置的话，你的浏览器会尝试着去填补所有的它认为是图形内部的地方。它对于上一节中的单独的线条是没什么影响的，但是对于折线就有关系了。你可以把 fill=”none” 删掉，试试看会发生什么。

多边形 <polygon>

如果你已经理解了折线元素，那么多边形元素也会很容易理解的。它和折线一样，只不过它会在最后自动闭合线条，变成一个图形。

<svg width="300px" height="200px">
  <polygon points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="red" stroke="#000"/>
</svg>

多边形的代码看起来应该很熟悉。和折线一样，多边形使用逗号来分隔每一组坐标点，这和上一节中我创建折线用的几乎是一样的代码。唯一的区别是这是一个多边形而不是折线。我可以在里边填充红色，而不是设置fill属性为none。

即使我们没有明确设置，它最后都会在最后一个点和第一个点之间绘制一条直线来闭合图形。多边形哪里是内部，哪里是外部，取决于你使用的坐标点以及坐标点的顺序。

对于多边形元素，实际中的使用更多的是用它来创建一个三角形。

<svg width="300px" height="200px">
  <polygon points="10 10, 10 200, 200,200" fill="blue" stroke="#000" />
</svg>

有一个更常用的可以用来绘制所有SVG图形和线条的方法是使用路径。我想在另一篇文章中再来单独讲讲路径， 所以我们现在就暂时不谈论它。

SVG渲染

SVG使用的是“画家算法”的渲染方式。也就是说它一次只对应绘制一个操作，后边的操作可以覆盖前边的操作。类似于CSS的级联。找个例子来说明会更清晰一些。

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="green" />
  <rect width="50%" height="50%" fill="purple" />
</svg>

上边的代码显示的结果是一个绿色的矩形，还包含了一个较小的紫色矩形。因为在代码中，紫色矩形写在绿色矩形后边，所以紫色的矩形会显示在绿色矩形的顶部，相对会更靠近查看图形的人。

总结

SVG提供了几个可以创建基本图形以及简单线条的元素，我希望经过上周和这周一起的两篇文章，你可以了解到SVG并不难创建和使用。

但是也不要被它们的简单欺骗了。如果你曾经上过绘画课程，你就会知道几个简简单单的图形也可以组合成任何你想要的东西。

正如我上周提到了，我希望对于复杂的SVG，你可以使用一个矢量编辑工具来创建。但是对于简单的图形，或者是简单图形和线条的组合，用代码来写可能会更快。

我需要先讲解填充(fills)和描边(strokes)以及它们的相关属性，因为在这个系列的文章中我会一直使用它们。所以这就是我下周要讲的内容啦！