TP Notes: SVG 材質貼圖

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)
```

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

沒有留言:

張貼留言