SVG之旅：基本形狀

周磊0 2017-12-21

展開全文

在未學(xué)習(xí)SVG之前，在Web頁面或Web應(yīng)用中使用一些基本形狀一般都是通過CSS的border來模擬或者clip-path來繪制圖形形狀,，也有使用Canvas來繪制,。當(dāng)然也有很多時候直接使用img或者background-image直接來引用圖形。而在SVG中,，提供了更為強大的圖形形狀的能力,，可以直接通過SVG來繪制矩形、圓角矩形,、圓形,、多邊形和曲線等。如果對Illustrator或者Sketch可以很輕松的繪制出基本形狀,，然后導(dǎo)出SVG文件,。今天我們主要來了解在SVG中怎么通過代碼來繪制基本形狀。

通過制圖軟件繪制基本形狀

在具體學(xué)習(xí)SVG代碼繪制基本形狀之前,，咱們先來看看制圖軟件繪制的基本形狀導(dǎo)出的SVG代碼,。這樣有助于我們后面更好的理解SVG代碼。

我這里使用的是Sketch制圖軟件來繪制,，具體怎么繪制，這里不做過多的闡述,。

在Sketch中,，通過Shape、Vector和Pencil等工具繪制基本形狀,。如上圖所示,。當(dāng)然，你要是Sketch的高手的話,，你可以使用它來繪制任何你想要的矢量圖形（很復(fù)雜,、很靚麗也很牛逼的那種）。咱們關(guān)注的是代碼部分,，把剛才繪制的圖形導(dǎo)出.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>

感覺代碼像一坨屎一樣,，估計你是無法忍受的,。默認(rèn)你接上上面的代碼,。上面的代碼在你的Web中呈現(xiàn)的效果如下：

接下來，咱們來看看怎么用SVG代碼繪制基本圖形,。

SVG繪制基本形狀

矩形

矩形就是指正方形或者長方形,，回過頭來看上面的代碼，矩形是通過元素來繪制的（包括帶圓角的矩形）,。這個元素中帶有一些屬性：

id：該形狀的名稱,，你也可以使用class來命名
x和y：矩形左上角的座標(biāo)
fill：矩形的填充顏色
stroke：矩形邊框顏色
stroke-width：矩形邊框的粗細(xì)
width：矩形的寬度
height：矩形的高度
rx：實現(xiàn)圓角效果時，圓角沿x軸的半徑
ry：實現(xiàn)圓角效果時,，圓角沿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這樣的制圖軟件導(dǎo)出的圓角矩形將會被轉(zhuǎn)為path。

圓形

在SVG中繪制圓形是使用來繪制,，除了具有元素中的fill,、stroke、stroke-width和id這些屬性之外,，它還具有rx,、ry和r屬性，不過不同的是,，其具有自己的屬性：

cx：圓心在x軸上的坐標(biāo)
cy：圓心在y軸上的坐標(biāo)
r：圓的半徑

代碼就像下面這樣硬擼：

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

效果如下：

橢圓

橢圓和圓有點不同,，其最大的不同點就在于橢圓具有x軸的半徑rx和y軸的半徑ry?？雌饋硪子诶斫?，但橢圓的公式卻是非常復(fù)雜的，詳細(xì)的可以查看維基百科中的橢圓相關(guān)的介紹,，或是用下面這張圖來幫你理解：

在SVG中關(guān)鍵屬性主要有：

rx：橢圓在x軸的半徑
ry：橢圓在y軸的半徑
cx：橢圓圓心在x軸的坐標(biāo)
cy：橢圓圓心在y軸的坐標(biāo)

來看段代碼：

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>

上面代碼對應(yīng)的效果如下所示：

從上面的示例效果不難看出,，當(dāng)rx和ry的值相等時，繪制出來的就是一個圓形,，和元素繪制出來的效果是等效的,。

多邊形

在SVG中，使用元素來繪制一個多邊形,，比如最前面看到的三角形,、五邊形之類的。其最關(guān)鍵的一個屬性是points屬性,，每個點具有一個從標(biāo)（x軸和y軸）,如果繪制的是一個三角形,，那么它有三個點，也就是說points有三個值,，其中x和y軸之前用逗號,分隔,，而每個點之間用空格符號來分隔。

使用繪制多邊形時,，最后一個點和第一個點將會連接起來,，形成一個閉環(huán),。比如下面的代碼：

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>

對應(yīng)的效果如下：

直線

在SVG中通過來繪制直線，在學(xué)習(xí)幾何的時候,，我們知道兩點繪制一條線,。那么在SVG中也是如此，通過兩個點的坐標(biāo)來繪制一條直線,，其對應(yīng)的屬性有：

x1：起點的x軸的坐標(biāo)
y1：起點的y軸的坐標(biāo)
x2：終點的x軸的坐標(biāo)
y2：終點的y軸的坐標(biāo)

降此之外,，通過stroke來設(shè)置直線的顏色，stroke-width來設(shè)置直線的粗細(xì),。比如我們可以像下面這樣繪制一條直線：

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

對應(yīng)的效果如下：

折線

SVG中繪制折線是通過元素來繪制,，和元素有點類似，不同的是起點和終點不閉合,，而元素卻會閉合,。其也是通過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>

對應(yīng)的效果如下：

path

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請點擊一鍵舉報,。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻花（0） +1

來自：周磊0 > 《待分類》

舉報/認(rèn)領(lǐng)