2019年7月15日 星期一

svg 的文字- text

要在 svg 裡繪製文字需要使用 text 的標籤,這邊可以替文字設定外框及填滿顏色,是跟一般網頁文字比較不一樣的地方。

See the Pen
svg text
by deathhell (@deathhell)
on CodePen.



還可以使用以下屬性調整文字樣式
font-family: 字型
font-weight: 文字粗細
font-style: 大概就是正常跟斜體
text-decoration: 文字裝飾,有 none, underline, overline, line-through 可以用
word-spacing: 字與字的間距
letter-spacing: 字母與字母的間距


可以用 text-anchor 調整文字對齊位置,跟 text-align 不大一樣大家可以注意一下

See the Pen
svg text-anchor
by deathhell (@deathhell)
on CodePen.


在 html 內想要調整某段文字的樣式,我們可以利用 span 包起來後再設定,而 svg 的 text 則可以使用 tspan 這個標籤。

See the Pen
svg text 2
by deathhell (@deathhell)
on CodePen.


設定 dy 可以調整垂直位置

See the Pen
svg text 3
by deathhell (@deathhell)
on CodePen.


寫在一起可以個別影響每個字母

See the Pen
svg text 3
by deathhell (@deathhell)
on CodePen.




Read more

2019年7月14日 星期日

svg 的漸層- linearGradient 與 radialGradient

在 svg 要使用漸層,需要使用 linearGradient 這個標籤,然後再使用 stop 去設定每個點的間層顏色就好,若使用 defs 可以設定完再利用 fill 的 url 去指定 id 即可。

簡單雙色:

See the Pen
svg gradient
by deathhell (@deathhell)
on CodePen.



多個顏色:

See the Pen
svg gradient 2
by deathhell (@deathhell)
on CodePen.



利用 stop-opacity 設定透明度,值為 0~1

See the Pen
svg gradient 3
by deathhell (@deathhell)
on CodePen.



要改變角度的話則是要設定起點跟終點的座標

See the Pen
svg gradient 4
by deathhell (@deathhell)
on CodePen.



還可以利用 spreadMethod 去設定間曾如果起點跟終點位置以外還有空間的漸層方式,分為 pad(延續前後的顏色)、repeat(重複)和 reflect(鏡射)這樣。

See the Pen
svg gradient 5
by deathhell (@deathhell)
on CodePen.



放射狀漸層則使用 radialGradient

See the Pen
svg gradient 6
by deathhell (@deathhell)
on CodePen.



利用 cx 跟 cy 改變圓心位置,以及用 r 改變漸層半徑

See the Pen
svg gradient 7
by deathhell (@deathhell)
on CodePen.


如果希望圓心不是在 cx 跟 cy 的地方,可以使用 fx 跟 fy 去調整圓心的點,調整完後會變成這樣,圓是以圓心畫出來的,但漸層的中心點不是在圓心。

See the Pen
svg gradient 8
by deathhell (@deathhell)
on CodePen.



一樣可以設定 spreadMethod 來改變起點跟終點外空間的樣式,可以設定的值跟線性漸層一樣。

See the Pen
svg gradient 9
by deathhell (@deathhell)
on CodePen.




Read more

svg 的 pattern

我們可以利用 pattern 來定義圖案,定義的時候若將 patternUnits 設定為 objectBoundingBox,由於我們定義的 pattern 的尺寸長寬都為 20%,所以在繪製的時候若無法剛好將圖片塞滿,則會像這樣感覺很不整齊。

See the Pen
patternUnits
by deathhell (@deathhell)
on CodePen.



若想讓 pattern 可以照我們設定的大小填滿框框,則可將 patternUnits 設定為 userSpaceOnUse。

See the Pen
patternUnits2
by deathhell (@deathhell)
on CodePen.


patternUnits 預設的值為 objectBoundingBox


可以用 patternContentUnits 設定 pattern 以容器為基準,值設定為 objectBoundingBox

See the Pen
svg patternContentUnits
by deathhell (@deathhell)
on CodePen.



這邊則是在 pattern 裡使用 pattern 的方法,可以讓你的圖樣更為活用。

See the Pen
svg pattern
by deathhell (@deathhell)
on CodePen.



Read more

2019年7月11日 星期四

[NXEDGE STYLE] EVA 二號機

P1200409

NXEDGE STYLE 推出的新劇場版 EVA 二號機一樣維持很高的水準,看起來應該是賣得不錯所以不只新劇場版的福音戰士陸續推出,連舊 TV 跟電影版的也都陸續推出中,對於喜歡 SD 版比例的真的也算是一個福音。

P1200386P1200387

正面背面,塗裝的很不錯,新劇場版不是很強調電力補給這塊,但模型有附感覺還是讓人會心一笑。



P1200388P1200389P1200390

滿喜歡新版的頭上有角的感覺還有新的配色。


P1200391P1200392P1200393P1200394P1200395P1200396P1200397P1200398

拿小刀隨便擺也很帥。


P1200399P1200400P1200401P1200402

飛行裝置。


P1200403P1200404P1200405P1200406

可以踢球可是感覺沒很好裝我就放棄了。

P1200407P1200408P1200409P1200410

步槍也是研究了半天裝不大上去放棄,不過光小刀就很帥了。


福音戰士新劇場版:破的介紹

Read more

2019年7月9日 星期二

使用 symbol 來製作 svg sprite

以往要製作小圖示會使用到 css sprite 的技巧,後來因為 rwd 及需要在視網膜解析度也能漂亮呈現 icon,就有用 icon font 取代 css sprite 的技術,但由於 icon font 一次需載入整包字型檔加上文字可能會有鋸齒,於是就又有些人會使用 svg sprite 的方式來製作,製作的方法是利用 svg symbol 的特性,先定義一些圖示後再把這些圖示用到想呈現的地方即可。


首先我們會用 svg 的 symbol 來定義一些圖樣,像這樣:


...



要使用的時候再用 use 去指定 id 就可以了




使用 js 去改變 xlink:href 的內容就可以切換 icon

See the Pen
svg sprite
by deathhell (@deathhell)
on CodePen.

Read more
Related Posts Plugin for WordPress, Blogger...