TP Notes
全部
CSS
SVG
資源收集
HTML
其它
關於我
Translate
2020年11月25日 星期三
SVG 材質貼圖
對於 2D 的圖形,材質貼圖相當實用,可以讓畫面更美觀,當初自己在設計繪圖函式庫時也花了不少時間在處理貼圖的部份,而現在 SVG 的貼圖做得更加完善 ``` pattern 參數 : viewBox "x,y,width,height" width 貼圖範圍 height patternUnits objectBoundingBox (預設) userSpaceOnUse patternTransform 接 transform 參數 preserveAspectRatio 預設 xMidYMid meet ``` 先來一個最常用的範例 用 pattern 建立一個材質,使用 fill="url(#ID)" 來使用這個材質 ``` $mmcode(r1) ```
## 詳細說明如下 : ### 圖1 當設定viewBox 以及 width 和 height 必須用 % (百分比) 表示時,材質大小會跟著縮放 ``` viewBox="0,0,40,40" width="20%" height="20%" ```
### 圖2 圖1 加上 preserveAspectRatio="none" 後,材質比例也跟著變形 ``` viewBox="0,0,40,40" width="20%" height="20%" preserveAspectRatio="none" ```
### 圖3 設定 patternUnits ="userSpaceOnUse" 後,材質變成以整個 svg 為底,大小位置也固定了 ``` viewBox="0,0,40,40" width="20%" height="20%" patternUnits ="userSpaceOnUse" ```
### 圖4 不設定 viewBox 只設定 patternUnits ="userSpaceOnUse" 時,width 和 height 如果用數字就是材質大小 ,如果是百分比 (%)就是百分比 ``` width="40" height="40" patternUnits ="userSpaceOnUse" ```
2020年11月22日 星期日
SVG 的 marker
SVG 對於線段有個有用的設定是 marker , 可以用來設定線段的起點、中間點,和終點的圖示 ``` marker 的參數 : viewBox 設定 icon 大小,格式為 "x y 寬 高" refX 設定 icon 的原點座標 refY markerWidth 設定 icon 要縮放的大小 markerHeight orient 設定 icon 旋轉角度,設 auto 的話會自動隨者線段旋轉,auto-start-reverse 則起點會反過來 ``` 使用時只要加上
marker-start(#ID) , marker-mid(#ID) , marker-end(#ID)
即可 ``` $mmcode(r0) ```
``` $mmcode(r1) ```
圖1:marker 的箭頭,一個長寬都是20方向向右的三角形
圖2:由 markerWidth 和 markerHeight 把箭頭設為 15x15
圖3:加上 orient="45",箭頭角度向右旋轉 45 度
圖4:加上 orient="auto" 後,箭頭角度會隨著線旋轉
圖5:加上 orient="auto-start-reverse" 後,起點的箭頭角度會旋轉 180 度
圖6:當線條寬度設為 2 時 (stroke-width="2") 箭頭也隨著增大兩倍
2020年11月20日 星期五
SVG 的 mask
SVG 的 mask 和 CSS 有一點不同,用的是黑白來代表透明度,白色是不透明,黑色是透明,如以下範例,圖1是 mask 用的圖,圖2是 rect 套用 mask 後,由黃色部份可以看到,中間的那個心是透明的。 clip-path 是直接裁切,mask 似忽可以取代 clip-path,而且還可以加上透明度 ``` $mmcode(r1) ```
圖1
圖2
## mask 的有趣範例 直接把圖檔當成 mask ,可以把彩色圖片變成黑白 ``` $mmcode(r2) ```
圖片套用文字當 mask,可以做出不錯的文字特效 ``` $mmcode(r3) ```
ASDF
ASDF
較新的文章
較舊的文章
首頁
訂閱:
文章 (Atom)