SVG之旅:基本形状

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

在未学习SVG之前,在Web页面或Web应用中使用一些基本形状一般都是通过CSS的border来模拟或者clip-path来绘制图形形状,也有使用Canvas来绘制。当然也有很多时候直接使用img或者background-image直接来引用图形。而在SVG中,提供了更为强大的图形形状的能力,可以直接通过SVG来绘制矩形圆角矩形圆形多边形曲线等。如果对Illustrator或者Sketch可以很轻松的绘制出基本形状,然后导出SVG文件。今天我们主要来了解在SVG中怎么通过代码来绘制基本形状。

通过制图软件绘制基本形状

在具体学习SVG代码绘制基本形状之前,咱们先来看看制图软件绘制的基本形状导出的SVG代码。这样有助于我们后面更好的理解SVG代码。

我这里使用的是Sketch制图软件来绘制,具体怎么绘制,这里不做过多的阐述。

SVG基本形状

在Sketch中,通过ShapeVectorPencil等工具绘制基本形状。如上图所示。当然,你要是Sketch的高手的话,你可以使用它来绘制任何你想要的矢量图形(很复杂、很靓丽也很牛逼的那种)。咱们关注的是代码部分,把刚才绘制的图形导出.svg文件。简单的手工处理一下,代码如下:

<svg width="441px" height="542px" viewBox="0 0 441 542">
    <defs>
        <rect id="path-1" x="24" y="102" width="223" height="61"></rect>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M24.5,5.5 L242.5,5.5" id="Line" stroke="#979797" stroke-width="7" stroke-linecap="square"></path>
        <path d="M35.5,55.5 L231.5,55.5" id="Line-2" stroke="#F43F3F" stroke-width="8" stroke-linecap="square"></path>
        <path id="Line-2-decoration-1" d="M231.5,55.5 L220.7,52.5 L220.7,58.5 L231.5,55.5 Z" stroke="#F43F3F" stroke-width="8" stroke-linecap="square"></path>
        <g id="Rectangle">
            <use fill="#50E3C2" fill-rule="evenodd" xlink:href="#path-1"></use>
            <rect stroke="#2B0B5D" stroke-width="2" x="25" y="103" width="221" height="59"></rect>
        </g>
        <ellipse id="Oval" fill="#E54C4C" cx="104" cy="230" rx="55" ry="25"></ellipse>
        <circle id="Oval-2" stroke="#1D36C6" stroke-width="6" fill="#BD10E0" cx="233.5" cy="229.5" r="41.5"></circle>
        <rect id="Rectangle-2" stroke="#979797" stroke-width="3" x="285.5" y="103.5" width="154" height="54" rx="8"></rect>
        <polygon id="Star" stroke="#979797" fill="#D8D8D8" points="54.5 359 36.5725498 369.506578 39.9963881 347.253289 25.4927763 331.493422 45.5362749 328.246711 54.5 308 63.4637251 328.246711 83.5072237 331.493422 69.0036119 347.253289 72.4274502 369.506578"></polygon>
        <polygon id="Polygon" stroke="#979797" fill="#D8D8D8" points="166.5 319 197.409337 341.456948 185.603021 377.793052 147.396979 377.793052 135.590663 341.456948"></polygon>
        <polygon id="Triangle" stroke="#979797" fill="#D8D8D8" points="281.5 319 310 372 253 372"></polygon>
        <path d="M7.36328125,456.507812 C21.8267071,446.910815 66.5037904,440.629565 141.394531,437.664062 L302.960938,475.503906 L282.238281,515.175781 L209.734375,538.65625 L222.191406,488.160156 L141.394531,498.050781 L72.9101563,527.65625 L65.2929688,488.160156 C12.2097513,476.655591 -7.10014455,466.10481 7.36328125,456.507812 Z" id="Path-2" stroke="#A13A3A" stroke-width="4"></path>
    </g>
</svg>

感觉代码像一坨屎一样,估计你是无法忍受的。默认你接上上面的代码。上面的代码在你的Web中呈现的效果如下:

接下来,咱们来看看怎么用SVG代码绘制基本图形。

SVG绘制基本形状

矩形

矩形就是指正方形或者长方形,回过头来看上面的代码,矩形是通过<rect>元素来绘制的(包括带圆角的矩形)。这个元素中带有一些属性:

  • id:该形状的名称,你也可以使用class来命名
  • xy:矩形左上角的座标
  • fill:矩形的填充颜色
  • stroke:矩形边框颜色
  • stroke-width:矩形边框的粗细
  • width:矩形的宽度
  • height:矩形的高度
  • rx:实现圆角效果时,圆角沿x轴的半径
  • ry:实现圆角效果时,圆角沿y轴的半径

手动写段代码:

<svg width="600" height="300">
    <rect id="A" x="30" y="30" fill="#ff6cc4" stroke="#c30d23" stroke-width="4" width="80" height="80" />
    <rect id="B" x="140" y="30" fill="#ff6cc4" width="80" height="80" />

    <rect id="C" x="30" y="140" fill="#6EA9FF" stroke="#c30d23" stroke-width="4" width="180" height="80" />
    <rect id="D" x="30" y="140" fill="#6EA9FF" width="180" height="80" />

    <rect id="E" x="240" y="140" fill="#ff6cc4" stroke="#6EA9FF" stroke-width="4" width="80" height="80" rx="10" ry="10" />
</svg>

其效果如下:

需要特别注意的是,通过Illustrator或Sketch这样的制图软件导出的圆角矩形将会被转为path

圆形

在SVG中绘制圆形是使用<circle>来绘制,除了具有<rect>元素中的fillstrokestroke-widthid这些属性之外,它还具有rxryr属性,不过不同的是,其具有自己的属性:

  • cx:圆心在x轴上的坐标
  • cy:圆心在y轴上的坐标
  • r:圆的半径

代码就像下面这样硬撸:

<svg width="600" height="300">
    <circle id="oval" stroke="#1D36C6" stroke-width="6" fill="#BD10E0" cx="260" cy="150" r="80" />
</svg>

效果如下:

椭圆

椭圆和圆有点不同,其最大的不同点就在于椭圆具有x轴的半径rxy轴的半径ry。看起来易于理解,但椭圆的公式却是非常复杂的,详细的可以查看维基百科中的椭圆相关的介绍,或是用下面这张图来帮你理解:

椭圆

在SVG中关键属性主要有:

  • rx:椭圆在x轴的半径
  • ry:椭圆在y轴的半径
  • cx:椭圆圆心在x轴的坐标
  • cy:椭圆圆心在y轴的坐标

来看段代码:

<svg width="600" height="300">
    <ellipse id="Oval" fill="#E54C4C" cx="80" cy="80" rx="55" ry="25" />
    <ellipse fill="#77DD47" stroke="#246614" stroke-width="5" cx="250" cy="75" rx="67" ry="44"/>
    <ellipse fill="#890000" stroke="#246614" stroke-width="5" cx="250" cy="200" rx="50" ry="50"/>
</svg>

上面代码对应的效果如下所示:

从上面的示例效果不难看出,当rxry的值相等时,绘制出来的就是一个圆形,和<circle>元素绘制出来的效果是等效的。

多边形

在SVG中,使用<polygon>元素来绘制一个多边形,比如最前面看到的三角形、五边形之类的。其最关键的一个属性是points属性,每个点具有一个从标(x轴和y轴),如果绘制的是一个三角形,那么它有三个点,也就是说points有三个值,其中xy轴之前用逗号,分隔,而每个点之间用空格符号来分隔。

使用<polygon>绘制多边形时,最后一个点和第一个点将会连接起来,形成一个闭环。比如下面的代码:

<svg>
    <polygon fill="#D271FF" points="100,56 62,107 37,49"/>
    <polygon fill="#68EADD" points="151,39 163,63 189,66 170,85 175,111 151,99 127,111 132,85 
    113,66 139,63 "/>
    <polygon fill="#FF7900" points="219,110 206,70 240,46 274,70 261,110 "/>
</svg>

对应的效果如下:

直线

在SVG中通过<line>来绘制直线,在学习几何的时候,我们知道两点绘制一条线。那么在SVG中也是如此,通过两个点的坐标来绘制一条直线,其对应的属性有:

  • x1:起点的x轴的坐标
  • y1:起点的y轴的坐标
  • x2:终点的x轴的坐标
  • y2:终点的y轴的坐标

降此之外,通过stroke来设置直线的颜色,stroke-width来设置直线的粗细。比如我们可以像下面这样绘制一条直线:

<svg height="300" width="300">
    <line x1="20" y1="20" x2="200" y2="200" stroke-width="10" stroke="#ff3366" />
<svg>

对应的效果如下:

折线

SVG中绘制折线是通过<polyline>元素来绘制,和<polygon>元素有点类似,不同的是<polyline>起点和终点不闭合,而<polygon>元素却会闭合。其也是通过points来控制折线中每个点的位置。

<svg width="400" height="400">
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#D07735" stroke-width="6" />
    <polyline points="200,40 240,40 240,80 280,80 280,120 320,120 320,160" fill="#F9F38C" stroke="#D07735" stroke-width="6" />
</svg>

对应的效果如下:

path

除了上述元素可以在SVG中绘制出对应的基本形状之外,在SVG中还有一个<path>元素,因为SVG是矢量图,因此在SVG中所有形状都可以由<path>来绘制。只不过不借助相关的制图软件的话,使用<path>来绘制基本形状会相当的复杂。而且<path>也是SVG较为复杂的一个绘制形状的元素,所以我们将会单独用一个章节来介绍它。今天就先不介绍<path>的相关内容。如果你感兴趣,欢迎关注后续的更新。

总结

今天我们主要学习了如何在SVG中通过其自有的元素来绘制一些基本形状:

  • <line>:绘制直线
  • <rect>:绘制矩形
  • <circle>:绘制圆形
  • <ellipse>:绘制椭圆形
  • <polygon>:绘制多边形
  • <polyline>:绘制折线

除此之外还有我们今天未介绍的<path>元素。上述这些属性有一些独立的属性,也有一些共用的属性,比如:

  • fill:填充图形颜色
  • stroke:图形边框的颜色
  • stroke-width:图形边框的粗细
  • id:图形的名称

如果你觉得使用SVG的这些元素来绘制图形形状费时又烧脑的话,你可以使用制图软件来完成。当然其也有一定的缺陷,导出来的SVG的文件中有很多冗余的代码。不过我们可以通过一些工具来优化导出来的代码。后续我们会介绍相关的工具。

那么今天我们就先聊到这里了,下一节咱们主要聊SVG中路径相关的知识。

由于本人是初学者,如果文章中有不对之处,烦请各路大婶拍正。如果你有更好的建议或者SVG相关的使用经验,欢迎在下面的评论中与我们一起分享。

上一节下一节

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

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

返回顶部