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) ``` <div class="mmresult r1"> <svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" style="background-color:#aef"> <defs> <pattern id="a112500_p1" width="30" height="30" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" fill="#a5f"/> </pattern> </defs> <path d="M10,100 L140,10 Q270,0,270,100 Q140,90,140,190z" stroke="#000" fill="url(#a112500_p1)"/> </svg> </div> ## 詳細說明如下 : ### 圖1 當設定viewBox 以及 width 和 height 必須用 ％ (百分比) 表示時，材質大小會跟著縮放 ``` viewBox="0,0,40,40" width="20%" height="20%" ``` <svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" style="background-color:#aef"> <defs> <linearGradient id="a112501_linear1" gradientTransform="rotate(45)"> <stop offset="0%" stop-color="#f00"></stop> <stop offset="100%" stop-color="#ff0"></stop> </linearGradient> <pattern id="a112501_p1" viewBox="0,0,40,40" width="20%" height="20%"> <rect x="0" y="0" width="40" height="40" fill="url(#a112501_linear1)"/> </pattern> <g id="a112501_g1"> <rect x="5" y="5"width="200" height="140" stroke="#000"/> <circle cx="150" cy="150" r="40" stroke="#000"/> <rect x="5" y="110" width="80" height="80" stroke="#000"/> <rect x="210" y="5" width="60" height="90%" stroke="#000"/> </g> </defs> <use xlink:href="#a112501_g1" fill="url(#a112501_p1)"/> </svg> ### 圖2 圖1 加上 preserveAspectRatio="none" 後，材質比例也跟著變形 ``` viewBox="0,0,40,40" width="20%" height="20%" preserveAspectRatio="none" ``` <svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" style="background-color:#aef"> <defs> <pattern id="a112501_p2" viewBox="0,0,40,40" width="20%" height="20%" preserveAspectRatio="none"> <rect x="0" y="0" width="40" height="40" fill="url(#a112501_linear1)"/> </pattern> </defs> <use xlink:href="#a112501_g1" fill="url(#a112501_p2)"/> </svg> ### 圖3 設定 patternUnits ="userSpaceOnUse" 後，材質變成以整個 svg 為底，大小位置也固定了 ``` viewBox="0,0,40,40" width="20%" height="20%" patternUnits ="userSpaceOnUse" ``` <svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" style="background-color:#aef"> <defs> <pattern id="a112501_p3" viewBox="0,0,40,40" width="20%" height="20%" patternUnits ="userSpaceOnUse"> <rect x="0" y="0" width="40" height="40" fill="url(#a112501_linear1)"/> </pattern> </defs> <use xlink:href="#a112501_g1" fill="url(#a112501_p3)"/> </svg> ### 圖4 不設定 viewBox 只設定 patternUnits ="userSpaceOnUse" 時，width 和 height 如果用數字就是材質大小 ，如果是百分比 (％）就是百分比 ``` width="40" height="40" patternUnits ="userSpaceOnUse" ``` <svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" style="background-color:#aef"> <defs> <pattern id="a112501_p4" width="40" height="40" patternUnits ="userSpaceOnUse"> <rect x="0" y="0" width="40" height="40" fill="url(#a112501_linear1)"/> </pattern> </defs> <use xlink:href="#a112501_g1" fill="url(#a112501_p4)"/> </svg>

對於 2D 的圖形，材質貼圖相當實用，可以讓畫面更美觀，當初自己在設計繪圖函式庫時也花了不少時間在處理貼圖的部份，而現在 SVG 的貼圖做得更加完善

pattern 參數 :

viewBox                "x,y,width,height"
width                  貼圖範圍
height

patternUnits           objectBoundingBox (預設)
                       userSpaceOnUse 
patternTransform       接 transform 參數

preserveAspectRatio    預設 xMidYMid meet

先來一個最常用的範例

用 pattern 建立一個材質，使用 fill="url(#ID)" 來使用這個材質

<svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" style="background-color:#aef">
  <defs>
    <pattern id="a112500_p1" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="#a5f"></circle>
    </pattern>
  </defs>
  <path d="M10,100 L140,10 Q270,0,270,100 Q140,90,140,190z" stroke="#000" fill="url(#a112500_p1)"></path>
</svg>

詳細說明如下 :

圖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"