TP Notes

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 則起點會反過來

```

使用時只要加上 <font color="#00f"><b>marker-start(#ID) , marker-mid(#ID) , marker-end(#ID)</b></font> 即可

```
$mmcode(r0)
```  
<div class="mmresult r0">
<svg style="background-color:#ffa" width=300 height=140>
<defs>
  <marker id="a11221_m01" viewbox="-10 -10 20 20" refX="0" refY="0" markerWidth="15" markerHeight="15">
    <circle cx="0" cy="0" r="10" fill="#f008"/>
  </marker>
  <marker id="a11221_m02" viewbox="0 0 20 20" refX="10" refY="10" markerWidth="15" markerHeight="15">
    <rect x="0" y="0" width="20" height="20" fill="#0f08"/>
  </marker>
  <marker id="a11221_m03" viewbox="0 0 20 20" refX="10" refY="10" markerWidth="15" markerHeight="15" orient="auto">
    <polygon points="0,0 20,10 0,20" fill="#00f8"/>
  </marker>
</defs>
  <path id="a11221_p01" d="M20,20 80,120 140,20 200,120 260,20" stroke="#000" stroke-width="1" fill=none marker-start="url(#a11221_m01)" marker-mid="url(#a11221_m02)" marker-end="url(#a11221_m03)"/>
</svg>

</div>
  
```
$mmcode(r1)
```
  
<div class="mmresult r1">
  
<style>
.a11221_bb
{
  display:inline-block;
  width:260px;
  padding:4px;
}
</style>

<div class="a11221_bb">圖1：marker 的箭頭，一個長寬都是20方向向右的三角形<br>
<svg style="background-color:#ffa" width=260 height=140>
  <defs>
  <path id="a11221_p1" d="M30,20 L130,20 L230,20 L230,100 L100,60" fill=none stroke="#000" />
  </defs>
  <path id="a11221_p2" d="M0,0 L20,10 L0,20z" fill="#f008" />
</svg>
</div>

<div class="a11221_bb">圖2：由 markerWidth 和 markerHeight 把箭頭設為 15x15<br>
<svg style="background-color:#ffa" width=260 height=140>
<defs>
  <marker id="a11221_m1" viewbox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15">
    <use xlink:href="#a11221_p2"/>
  </marker>
</defs>
  <use xlink:href="#a11221_p1" stroke-width="1"  marker-start="url(#a11221_m1)" marker-mid="url(#a11221_m1)" marker-end="url(#a11221_m1)"/>
</svg>
</div>

<div class="a11221_bb">圖3：加上 orient="45"，箭頭角度向右旋轉 45 度<br>
<svg style="background-color:#ffa" width=260 height=140>
<defs>
  <marker id="a11221_m3" viewbox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="45">
    <use xlink:href="#a11221_p2"/>
  </marker>
</defs>
  <use xlink:href="#a11221_p1" stroke-width="1"  marker-start="url(#a11221_m3)" marker-mid="url(#a11221_m3)" marker-end="url(#a11221_m3)"/>
</svg>
</div>

<div class="a11221_bb">圖4：加上 orient="auto" 後，箭頭角度會隨著線旋轉<br>
<svg style="background-color:#ffa" width=260 height=140>
<defs>
  <marker id="a11221_m4" viewbox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="auto">
    <use xlink:href="#a11221_p2"/>
  </marker>
</defs>
  <use xlink:href="#a11221_p1" stroke-width="1"  marker-start="url(#a11221_m4)" marker-mid="url(#a11221_m4)" marker-end="url(#a11221_m4)"/>
</svg>
</div>

<div class="a11221_bb">圖5：加上 orient="auto-start-reverse" 後，起點的箭頭角度會旋轉 180 度<br>
<svg style="background-color:#ffa" width=260 height=140>
<defs>
  <marker id="a11221_m5" viewbox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="auto-start-reverse">
    <use xlink:href="#a11221_p2"/>
  </marker>
</defs>
  <use xlink:href="#a11221_p1" stroke-width="1"  marker-start="url(#a11221_m5)" marker-mid="url(#a11221_m5)" marker-end="url(#a11221_m5)"/>
</svg>
</div>
  
<div class="a11221_bb">圖6：當線條寬度設為 2 時 (stroke-width="2") 箭頭也隨著增大兩倍<br>
<svg style="background-color:#ffa" width=260 height=140>
<defs>
  <marker id="a11221_m6" viewbox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="15" orient="auto-start-reverse">
    <use xlink:href="#a11221_p2"/>
  </marker>
</defs>
  <use xlink:href="#a11221_p1" stroke-width="2"  marker-start="url(#a11221_m6)" marker-mid="url(#a11221_m6)" marker-end="url(#a11221_m6)"/>
</svg>
</div>
  
</div>

2020年11月20日星期五

SVG 的 mask

SVG 的 mask 和 CSS 有一點不同，用的是黑白來代表透明度，白色是不透明，黑色是透明，如以下範例，圖1是 mask 用的圖，圖2是 rect 套用 mask 後，由黃色部份可以看到，中間的那個心是透明的。

clip-path 是直接裁切，mask 似忽可以取代 clip-path，而且還可以加上透明度

```
$mmcode(r1)  
```
  
<div class="mmresult r1">
<div style="display:inline-block">圖1<br>
<svg width="200" height="200" style="background-color:#000">
<defs>
  <path id="a11201_p1" d="M0,50 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 C200,110,150,150,100,180 C50,150,0,110,0,50Z"></path>
</defs>
  <use xlink:href="#a11201_p1" fill="#fff"/>
  <use xlink:href="#a11201_p1" fill="#000" transform="translate(30,30) scale(0.7)"/>
  <use xlink:href="#a11201_p1" fill="#888" transform="translate(50,50) scale(0.5)"/>
</svg>
</div>

</div>

## mask 的有趣範例

直接把圖檔當成 mask ，可以把彩色圖片變成黑白

```
$mmcode(r2)  
```
  
<div class="mmresult r2">
<svg width="200" height="200" style="background-color:#000">
<mask id="a11202_aa">
  <image href="https://yiharng.github.io/bird.jpg" width="200" height="200" preserveAspectRatio="none"/>
</mask>
<rect x="0" y="0" width="200" height="200" mask="url(#a11202_aa)" fill="#fff"/>
</svg>
</div>

圖片套用文字當 mask，可以做出不錯的文字特效

```
$mmcode(r3)  
```
  
<div class="mmresult r3">
<svg width="200" height="100">
<mask id="a11203_bb">
  <text x="22" y="62" font-size="60" stroke-width="9" fill="#777" stroke="#777">ASDF</text>
  <text x="20" y="60" font-size="60" stroke-width="4" fill="#fff" stroke="#fff">ASDF</text>
</mask>
  <image href="https://yiharng.github.io/bird.jpg" width="200" height="100" preserveAspectRatio="none" mask="url(#a11203_bb)"/>
</svg>
</div>

Translate

2020年11月25日 星期三