iT邦幫忙

DAY 2
4

SVG 與 D3.js系列 第 2

D3.js 前的SVG簡介

歡迎來我Blog看完整範例:http://wcc723.github.io/d3js/2014/10/01/Ironman-30-days-02/

這部分會持續幾篇,主要是我先前Blog整理出來的,不會相當的深入,是為了解SVG的使用方式。另外這次鐵人賽也有高手是介紹SVG,如果有興趣也可以參考其他高手的文章。

SVG(Scalable Vector Graphics),中文直譯就是”可縮放向量圖形 “,它是以XML格式儲存,而在瀏覽器上是從IE9後才開始支援SVG。也因為是XML格式,所以D3對它特別容易進行操作。

教程參考:http://tutorials.jenkov.com/svg/

SVG 範例(直接繪製)

在svg標簽內就可以直接開始繪製向量圖型,而其中xmlns="http://www.w3.org/2000/svg"在微軟MSDN的解釋為定義SVG區段的命名空間,移除也沒什麼差別。

在定義SVG時,也建議同時給予寬與高,如果沒有,預設是100%。

<!-- SVG tag -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="120">
    <!-- 矩行 tag -->
    <rect x="2" y="2" width="100" height="100" style="stroke: #333; stroke-width: 3; fill: MediumTurquoise;"/>
</svg>

SVG 基本型

SVG是屬於向量的圖形,所以他有許多的繪圖概念與Illustrator相似,如矩行、圓形、多邊形等等...。

矩形

在定義一個形狀時,通常會定義以下屬性,形狀、位置、尺寸以及樣式。矩行是相當基本的圖形,所以就依序定義以下屬性。

"shapes tag" "x" "y" "width" "height" "style"

<svg width="100%" height="105">
    <rect x="2" y="2" width="100" height="100" style="stroke: #333; stroke-width: 3; fill: FireBrick;"/>
    <rect x="120" y="2" width="200" height="100" style="stroke: #333; stroke-width: 3; fill: LightSkyBlue;"/>
</svg>


而矩形除了一般的方形、長方形以外,也可以增加圓角的屬性rx、ry,但這就沒有像css的border-radius那麼的自由了,只能四個角設定相同的值;rx、ry也僅僅是設定其圓角垂直以及水平的半徑而已。

<svg width="100%" height="105">
    <rect x="2" y="2" width="100" height="100" rx="10" style="stroke: #333; stroke-width: 3; fill: FireBrick;"></rect>
    <rect x="120" y="0" width="200" height="100" rx="40" ry="10" style="stroke: #333; stroke-width: 3; fill: LightSkyBlue;"></rect>
</svg>

圓形

圓形中有一點要特別注意,圓形的cx,cy所代表的是圓心(r)的位置,所以在定義圓形的位置,如果不想跑到圖框外,務必cx、cy要大於r的值。

<svg width="100%" height="105">
    <circle cx="100" cy="51" r="50" style="stroke: #333; stroke-width: 3; fill: SeaShell;"/>
</svg>

### 橢圓形

橢圓形概念和圓形也相當類似,只是將半徑r的值改成垂直及水平半徑rx、ry。

<svg width="100%" height="100">
    <ellipse cx="100" cy="51" rx="80" ry="30" style="stroke: #333; stroke-width: 3; fill: MediumVioletRed;"/>
</svg>

CSS樣式控制

SVG就像HTML的物件一樣很好控制,但不同的是他有屬於它自己的屬性,就好比我們要將顏色填滿在一般html物件會使用background-color,而在SVG內會使用fill,這部分也會運用到D3。

先產生一個SVG物件,但不要設定Style,只增加class

<svg width="100%" height="105">
    <rect x="2" y="2" width="100" height="100"/>
    <rect class="rect" x="120" y="2" width="200" height="100"/>
</svg>

接下來寫一段CSS,針對剛剛增加的class,控制它的填滿以及筆畫寬度(跟Illustrator很像吧),還可以補上:hover

.rect{
    fill: HotPink;
    stroke: LightSlateGray;
    stroke-width: 3px;
    transition: fill .3s;
}
.rect:hover{
    fill: SlateGray;
}

結果我們會看到以下這樣的結果,左邊沒有設定會是黑色(沒設定是黑色、不會是透明!),右邊就是剛剛所設定的樣式。

小結

如果對於SVG有興趣的設計師,也可以試試看把Illustrator的檔案轉出成SVG,在一個個拆解,就會發現SVG跟Illustrator根本就是太像了。用canvas的概念來思考,當然也可以將Photoshop轉成png,只是最終發現他還是一張圖...(認真)。


上一篇
2014 鐵人賽慢慢開始跑 [d3js 與 SVG]
下一篇
SVG 超硬派了解 line, polygon, polyline, path (手工繪製)
系列文
SVG 與 D3.js30

尚未有邦友留言

立即登入留言