iT邦幫忙

DAY 6
2

SVG 與 D3.js系列 第 6

SVG Stroke , Marker 以及 CSS

完整範例:http://wcc723.github.io/d3js/2014/10/05/Ironman-30-days-06/

今天是假日,就來個簡單的收尾,來介紹這幾天的混合用法,當然,我不會想在假日看到<Path>...。

會先介紹之前Blog所提到的stroke animation,在介紹marker,marker是製作一個圖形,套用在line、path、polygon等等的線段上,可以定義在起始點、終點、以及轉折點上。

Stroke Dash

參考來源

http://cssdeck.com/labs/ironman-svg-line-animation

作者是把這效果用在描繪鋼鐵人上,做得很酷,而本篇是介紹它的原理。

stroke-dasharray + stroke-dashoffset

stroke-dasharray是把stroke做成了是虛線的效果,線段會被拆成線段、空白、線段、空白,效果就像下面這樣。

line {
stroke-dasharray: 60;
}

如上顯示,線段被拆成60px的line在空60px的space。

stroke-dashoffset

而stroke-dashoffset屬性是將上面的虛線推移,兩者會有以下幾點特性:

  • 推移後,dasharray還是會保持循環。
  • dashoffset的值不會大於dasharray。
  • 如果dashoffset 等於 dasharray,線段起始點會是空白。

所以這部分就再加上40的stroke-dashoffset來看看結果。

line.l2{
stroke-dashoffset: 40;
}

如果兩者數值相等,線段的起始點就會呈現空白,這邊先設較小的值(200)。

line.l3{
stroke-dasharray: 200;
stroke-dashoffset: 200;
}

如果數值相當的大,就能夠將整個線段隱藏。

結合CSS aniamtion

aniamtion 相關的瀏覽器前輟詞問題,可參考/css/2013/10/17/css-animation-keyframe/

這邊就show重要的CSS code,利用上面的原理將線段隱藏,然後透過animation將線段拉回來,這樣就會有動態描繪的感覺。

//sass
.stroke
stroke-dashoffset: 2000
stroke-dasharray: 2000

//動畫效果 10秒 線性動畫 無限循環
.ani
animation: circle-draw 10s linear infinite

//keyframes的值
//將dashoffset拉回至0
@keyframes circle-draw
80%
stroke-dashoffset: 0

<svg class="stroke ani" height="400" width="100%" >
<g>
<circle cx="200" cy="200" r="10"/>
<circle cx="200" cy="200" r="20"/>
<circle cx="200" cy="200" r="30"/>
<circle cx="200" cy="200" r="40"/>
<circle cx="200" cy="200" r="50"/>
<circle cx="200" cy="200" r="60"/>
<circle cx="200" cy="200" r="70"/>
<circle cx="200" cy="200" r="80"/>
<circle cx="200" cy="200" r="90"/>
<circle cx="200" cy="200" r="100"/>
<circle cx="200" cy="200" r="110"/>
<circle cx="200" cy="200" r="120"/>
<circle cx="200" cy="200" r="130"/>
<circle cx="200" cy="200" r="140"/>
<circle cx="200" cy="200" r="150"/>
<circle cx="200" cy="200" r="160"/>
</g>
</svg>

以上的SVG code,當然這也可以用Illustrator來繪製,只要把svg code換掉就可以了。

注意,儘量不要在網頁上做無限循環的重復播放,很耗效能。

回到Marker

根據上一篇的介紹,Marker做法和漸層相當的類似,除了需要定義id外,一樣需要寬與高,不過marker還多了refx 和 refy,這是用來給路徑套用時所參照的相對位置;所以下面的範例refx="5" refy="5",也是要給circle使用的位置。

在定義完後,Polyline的style內加上marker-mid: url(#midCircle);就完成對marker的套用,當然這篇的另一個範例所使用的CSS(Class)也可以繼續套用在這範例上。

<svg width="100%" height="200">
<defs>
<marker id="midCircle" markerWidth="8" markerHeight="8" refx="5" refy="5">
<circle id="dot" cx="5" cy="5" r="3" fill="red" />
</marker>
<marker id="endCircle" markerWidth="8" markerHeight="8" refx="5" refy="5">
<circle id="dot" cx="5" cy="5" r="3" fill="white" stroke="red" />
</marker>
</defs>
<polyline class="stroke ani" points="20,140 60,120 80,100 100,95 120,120 140,80 160,85 180,125 200,80 220,95 240,140 260,145 280,120 300,95 320,88 340,80 360,102"
style="fill:none;
stroke:red;
stroke-width:1;
marker-mid: url(#midCircle);
marker-end: url(#endCircle);
" />
</svg>

這樣就做出簡易的折線圖,SVG的觀念和一般的Html有些的不同,這次的鐵人賽主要介紹的不是SVG,只是略微帶過,有興趣的可以參考 http://tutorials.jenkov.com/svg/index.html 所寫的SVG教學。

台灣也有高手是介紹SVG的也可以多向他學習http://www.oxxostudio.tw/index.html?tag-web,不止基礎的教學,還包含許多豐富的技法,令人歎為觀止(跪)。

接下來開始,就會進入D3js的世界,有許多沒辦法做很好的地方,就試試看用硬派的方式去處理吧。


上一篇
SVG Defs 以及 CSS
下一篇
D3js 前置作業,製作簡易WebServer
系列文
SVG 與 D3.js30

尚未有邦友留言

立即登入留言