2019年7月14日 星期日

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.



反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...