TP Notes: SVG 的 defs 以及漸層填色

2020年11月12日星期四

SVG 的 defs 以及漸層填色

SVG 的 defs 可以用來定義各種圖形或路徑，在其它 svg 中只要用 
```<use xlink:href="#ID"/>``` 即可引用，範例如下

在這個範例中，第一個 svg 是隱藏的，純脆只定義幾個矩形，下面兩個 svg 引用後繪製圖形，在引用時可以設定裡頭的參數，而這裡設定的座標參數是相對座標

defs 的位置似忽沒有限制，範例中的 a11121_rect5 在前面使用，卻在後面才定義，結果一樣可以正常顯示

```
$mmcode(r1)
```

<div class="mmresult r1">

<svg style="display:none;">
<defs>
  <g id="a11121_g1">
    <rect id="a11121_rect1" width="50" height="50" x="30" y="10" fill="#f00"/>
    <rect id="a11121_rect2" width="50" height="50" x="30" y="80" fill="#f00"/>
    <rect id="a11121_rect1" width="50" height="50" x="200" y="10" fill="#000"/>
    
    <text x="30" y="40" fill="#fff">x=30</text>
    <text x="200" y="40" fill="#fff">x=200</text>
    <text x="100" y="75" fill="#000">x=100</text>
  </g>
</defs>
</svg>

<svg style="background-color:#afa">
    <use xlink:href="#a11121_g1"/>
    
    <use xlink:href="#a11121_rect1" x="100"/>
    
    <text x="130" y="40" fill="#fff">x=130</text>
    <use xlink:href="#a11121_rect5"/>
</svg>

<svg style="background-color:#aff">
    <use xlink:href="#a11121_rect1"/>
    <use xlink:href="#a11121_rect1" x="100"/>
    
    <use xlink:href="#a11121_rect2"/>
    <use xlink:href="#a11121_rect3" x="100"/>
    <defs>
        <rect id="a11121_rect5" width="50" height="50" x="200" y="80" fill="#0e0"/>
    </defs>
</svg>

<button id="a11121_b1" style="font-size:1em">改顏色</button>
<button id="a11121_b2" style="font-size:1em">新增矩形</button>

<script>
(function()
{
  $("#a11121_b1").on("click",()=>
  {
    $("#a11121_rect2").attr("fill","#00f");
  });

$("#a11121_b2").on("click",()=>
  {
    $("#a11121_g1").append('<rect id="a11121_rect3" width="50" height="50" x="100" y="80" fill="#f0f"/>');

$("#a11121_g1").html($("#a11121_g1").html());
/* 光 append 一段 html 沒有作用，整個 html 置換才有作用，所以要加這一行 */
  });

})();

</script>
</div>
<hr>

# defs 的應用-漸層填色

defs 的第一個應用是漸層填色，和 CSS 的漸層填色很像，一個線性漸層和一個圓形漸層

基本範例 :

```
$mmcode(r2)
```

<div class="mmresult r2">

<svg style="background-color:#afa;width:250px;height:50px">
<defs>
    <linearGradient id="a11122_linear1" gradientTransform="rotate(45)">
      <stop offset="0%"  stop-color="#f00" />
      <stop offset="100%" stop-color="#ff0" />
    </linearGradient>
    <radialGradient id="a11122_rad1">
      <stop offset="0%" stop-color="#f00" />
      <stop offset="100%" stop-color="#ff0" />
    </radialGradient>
    <rect id="a11122_rect1" width="100" height="50" x="0" y="0"/>
    <rect id="a11122_rect2" width="100" height="50" x="0" y="0" fill="#00f"/>
    
</defs>
<use xlink:href="#a11122_rect1" fill="url('#a11122_linear1')"/>
<use xlink:href="#a11122_rect2" fill="url('#a11122_rad1')" x="120"/>
</svg>

<button id="a11122_b1" style="font-size:1em;">取消填色</button>
<script>
$(function()
{
  $("#a11122_b1").on("click",()=>
  {
    $("#a11122_rect2").attr("fill","");
  });
});
</script>

</div>

<hr>

## linearGradient 線性漸層

參數 :

```css
x1,y1,x2,y2          從 x1,y1 漸層到 x2,y2 , 可以用 5% 或 0.5 表示
gradientTransform    和 CSS 的 transform 一樣
spreadMethod         pad(預設) , reflect , repeat
href                 引用別處定義的 stop 值
```
## radialGradient 圓形漸層

```css
cx,cy,r              圓形漸層的圓心座標和半徑
gradientTransform    和 CSS 的 transform 一樣
spreadMethod         pad(預設) , reflect , repeat
                     (經測試，在 MAC的Safari 和 iphone 沒作用)
fx,fy,fr             在cx,cy,r的圈圈中，漸層的中心點和半徑
href                 引用別處定義的 stop 值

```

範例 :
  
```
$mmcode(r3)
```

<div class="mmresult r3">

<svg style="background-color:#afa;width:400px;height:300px">
<defs>
    <linearGradient id="a11123_linear1" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="pad">
      <stop offset="0%"  stop-color="#f00" />
      <stop offset="100%" stop-color="#ff0" />
    </linearGradient>
    <linearGradient id="a11123_linear2" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="repeat" href="#a11123_linear1"/>
    <linearGradient id="a11123_linear3" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="reflect" href="#a11123_linear1"/>
    <radialGradient id="a11123_rad1" cx="0.5" cy="0.5" r="0.3" fx="0.5" fy="0.5" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#f00" />
      <stop offset="1" stop-color="#ff0" />
    </radialGradient>
    <radialGradient id="a11123_rad2" cx="0.5" cy="0.5" r="0.3" fx="0.5" fy="0.5" fr="0" spreadMethod="repeat" href="#a11123_rad1"/>
    <radialGradient id="a11123_rad3" cx="0.5" cy="0.5" r="0.3" fx="0.5" fy="0.5" fr="0" spreadMethod="reflect" href="#a11123_rad1"/>
    <radialGradient id="a11123_rad4" cx="0.5" cy="0.5" r="0.3" fx="0.7" fy="0.7" fr="0" spreadMethod="pad" href="#a11123_rad1"/>
    <radialGradient id="a11123_rad5" cx="0.5" cy="0.5" r="0.3" fx="0.7" fy="0.7" fr="0" spreadMethod="repeat" href="#a11123_rad1"/>
    <radialGradient id="a11123_rad6" cx="0.5" cy="0.5" r="0.3" fx="0.7" fy="0.7" fr="0" spreadMethod="reflect" href="#a11123_rad1"/>
</defs>
<rect width="90" height="50" x="0" y="0" fill="url('#a11123_linear1')" stroke="#000" />
<rect width="90" height="50" x="100" y="0" fill="url('#a11123_linear2')" stroke="#000" />
<rect width="90" height="50" x="200" y="0" fill="url('#a11123_linear3')" stroke="#000" />
<rect width="90" height="90" x="0" y="60" fill="url('#a11123_rad1')" stroke="#000"/>
<rect width="90" height="90" x="100" y="60" fill="url('#a11123_rad2')" stroke="#000"/>
<rect width="90" height="90" x="200" y="60" fill="url('#a11123_rad3')" stroke="#000"/>
<rect width="90" height="90" x="0" y="160" fill="url('#a11123_rad4')" stroke="#000"/>
<rect width="90" height="90" x="100" y="160" fill="url('#a11123_rad5')" stroke="#000"/>
<rect width="90" height="90" x="200" y="160" fill="url('#a11123_rad6')" stroke="#000"/>
</svg>
</div>

<hr>

既然可以用圓形漸層，就可以做出立體的球囉!

```
$mmcode(r4)
```

<div class="mmresult r4">
<svg style="width:400px;height:200px">
<defs>
  <radialGradient id="a11124_r1" cx="0.3" cy="0.3" r="0.7">
    <stop offset="0"   stop-color="#eee"></stop>
    <stop offset="0.3" stop-color="#888"></stop>
    <stop offset="0.7" stop-color="#333"></stop>
    <stop offset="1"   stop-color="#111"></stop>
  </radialGradient>
  <radialGradient id="a11124_r2" cx="0.7" cy="0.3" r="0.7" href="#a11124_r1" />
</defs>
<circle cx="100" cy="100" r="80" fill="url(#a11124_r1)"/>
<circle cx="300" cy="100" r="80" fill="url(#a11124_r2)"/>
</svg>

</div>

沒有留言:

張貼留言