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

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

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

```
$mmcode(r1)
```

$("#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)
```

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

<hr>

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

```
$mmcode(r4)
```

</div>

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

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



<svg style="display:none;">
<defs>
  <g id="a11121_g1">
    <rect id="a11121_rect1" width="50" height="50" x="30" y="10" fill="#f00"></rect>
    <rect id="a11121_rect2" width="50" height="50" x="30" y="80" fill="#f00"></rect>
    <rect id="a11121_rect1" width="50" height="50" x="200" y="10" fill="#000"></rect>
    <!--   a11121_rect1 重覆了   -->
    <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>
    <!--   a11121_rect1 重覆時，當使用整個 group ，一樣會顯示   -->
    <use xlink:href="#a11121_rect1" x="100"></use>
    <!--  這裡重設 x="100" 結果位置卻是在 130 也就是重設的座標是相對座標  -->
    <text x="130" y="40" fill="#fff">x=130</text>
    <use xlink:href="#a11121_rect5"></use>
</svg>

<svg style="background-color:#aff">
    <use xlink:href="#a11121_rect1"></use>
    <use xlink:href="#a11121_rect1" x="100"></use>
    <!--   a11121_rect1 重覆時，只會取用第一個   -->
    <use xlink:href="#a11121_rect2"></use>
    <use xlink:href="#a11121_rect3" x="100"></use>
    <defs>
        <rect id="a11121_rect5" width="50" height="50" x="200" y="80" fill="#0e0"></rect>
    </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"></rect>');

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


})();

</script>

defs 的應用-漸層填色

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

基本範例 :



<svg style="background-color:#afa;width:250px;height:50px">
<defs>
    <linearGradient id="a11122_linear1" gradientTransform="rotate(45)">
      <stop offset="0%" stop-color="#f00"></stop>
      <stop offset="100%" stop-color="#ff0"></stop>
    </linearGradient>
    <radialGradient id="a11122_rad1">
      <stop offset="0%" stop-color="#f00"></stop>
      <stop offset="100%" stop-color="#ff0"></stop>
    </radialGradient>
    <rect id="a11122_rect1" width="100" height="50" x="0" y="0"></rect>
    <rect id="a11122_rect2" width="100" height="50" x="0" y="0" fill="#00f"></rect>
    <!--  當這裡定義了 fill ，下面的 use 去設定 fill 會失效  -->
</defs>
<use xlink:href="#a11122_rect1" fill="url('#a11122_linear1')"></use>
<use xlink:href="#a11122_rect2" fill="url('#a11122_rad1')" x="120"></use>
</svg>

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

linearGradient 線性漸層

參數 :

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

radialGradient 圓形漸層

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

範例 :



<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>
      <stop offset="100%" stop-color="#ff0"></stop>
    </linearGradient>
    <linearGradient id="a11123_linear2" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="repeat" href="#a11123_linear1"></linearGradient>
    <linearGradient id="a11123_linear3" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="reflect" href="#a11123_linear1"></linearGradient>
    <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>
      <stop offset="1" stop-color="#ff0"></stop>
    </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>
    <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>
    <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>
    <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>
    <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"></radialGradient>
</defs>
<rect width="90" height="50" x="0" y="0" fill="url('#a11123_linear1')" stroke="#000"></rect>
<rect width="90" height="50" x="100" y="0" fill="url('#a11123_linear2')" stroke="#000"></rect>
<rect width="90" height="50" x="200" y="0" fill="url('#a11123_linear3')" stroke="#000"></rect>
<rect width="90" height="90" x="0" y="60" fill="url('#a11123_rad1')" stroke="#000"></rect>
<rect width="90" height="90" x="100" y="60" fill="url('#a11123_rad2')" stroke="#000"></rect>
<rect width="90" height="90" x="200" y="60" fill="url('#a11123_rad3')" stroke="#000"></rect>
<rect width="90" height="90" x="0" y="160" fill="url('#a11123_rad4')" stroke="#000"></rect>
<rect width="90" height="90" x="100" y="160" fill="url('#a11123_rad5')" stroke="#000"></rect>
<rect width="90" height="90" x="200" y="160" fill="url('#a11123_rad6')" stroke="#000"></rect>
</svg>

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


<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"></radialGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="url(#a11124_r1)"></circle>
<circle cx="300" cy="100" r="80" fill="url(#a11124_r2)"></circle>
</svg>

TP Notes

Translate

2020年11月12日星期四

SVG 的 defs 以及漸層填色

defs 的應用-漸層填色

linearGradient 線性漸層

radialGradient 圓形漸層

沒有留言:

張貼留言

Translate

2020年11月12日 星期四

SVG 的 defs 以及漸層填色

defs 的應用-漸層填色

linearGradient 線性漸層

radialGradient 圓形漸層

沒有留言:

張貼留言

2020年11月12日星期四