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> 这个根元素内添加了widthheight的属性,我之后会讲到这点。现在你只需要知道,如果你的SVG图形可能会被剪裁,你可以在<svg> 元素中添加和被剪裁的图形相同甚至大一些的widthheight属性,来防止它被剪裁。

圆形 <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轴上有不同的半径,即rxry,与圆形的半径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坐标

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

因为线条没办法进行填充,所以我使用了strokestroke-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)以及它们的相关属性,因为在这个系列的文章中我会一直使用它们。所以这就是我下周要讲的内容啦!

本文根据@Steven Bradley的《SVG Basics—How To Create Simple Shapes And Lines》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.vanseodesign.com/web-design/svg-shapes-lines/

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:http://www.w3cplus.com/svg/svg-shapes-lines.html

返回顶部