SVG之旅:基本形状

在未学习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"&g
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部