TP Notes

2020年12月7日星期一

SVG 與 javascript

SVG 可以很不錯的和 CSS 整合在一起，那麼來看看和 javascript 相關的 API

# 動畫控制
  
SVG 的動畫控制上，針對單一動畫很奇怪的沒有 **暫停** 這個功能，只能對全部的 SVG 動畫全部暫停
  
指令 :
  
```
  svg.pauseAnimations();
  svg.unpauseAnimations();
```
  
範例如下:
  
```
$mmcode(r0)
```
  
<div class="mmresult r0">
<svg id="a120700_svg" width="300" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x=10 y=10 width=20 height=20>
  <animate attributeName="x" values="10;200" dur="3s" repeatCount="indefinite"/>
</rect>
</svg><br>
<button id="a120700_pause">暫停</button>
<button id="a120700_unpause">繼續</button>
<br>
<script>
$(()=>
{
  $("#a120700_pause").on("click",()=>
  {
    $("#a120700_svg")[0].pauseAnimations();
  });
  $("#a120700_unpause").on("click",()=>
  {
    $("#a120700_svg")[0].unpauseAnimations();
  });
});
</script>  
</div>

對於單一動畫比較會用到的 API 有這些

```
  getCurrentTime()     - 取得目前動畫的時間
  beginElement()       - 開始動畫
  beginElementAt(時間)  - 在時間(秒)後開始動畫
  endElement()         - 停止動畫
  endElementAt(時間)    - 在時間(秒)後停止動畫
  
EVENT 的部份有這三個
  
  beginEvent           - 動畫開始時
  endEvent             - 動畫停止時
  repeatEvent          - 動畫重覆時
  
```

先來一個簡單的範例，範例中每 100ms 更新一次狀態，用下面這段程式碼來取得動畫執行中的 x 座標，如果要設定計 **暫停** 的功能，必須先取得座標，在下次執行時從這裡開始，然而這個解法有很多問題，最理想的還是等 SVG 的動畫新增暫停的指令
  
```
  document.getElementById("a120701_r1").x.animVal.value;
```
  
```
$mmcode(r1)
```
  
<div class="mmresult r1">
<svg width="300" height="60">
<rect id="a120701_r1" x="10" y="10" width="30" height="30">
<animate id="a120701_a1" attributeName="x" to="250" dur="6s" repeatCount="indefinite" begin="indefinite" end="indefinite" fill="freeze"/>
</rect>
</svg> <br>
<button id="a120701_start">點我開始</button>
<button id="a120701_stop">點我停止</button>
<br><br>
動畫時間 : <span id="a120701_time"></span><br>
x 座標 : <span id="a120701_xloc"></span><br><br>
$textarea id="a120701_status" style="width:300px;height:100px">
$/textarea>
<script>
$(()=>
{
  let hh="";
  let tt=0;
  let a1=document.getElementById("a120701_a1");
/////////
  a1.addEventListener("beginEvent",function()
  {
    show("beginEvent");
  });
  a1.onbegin=function()//這個用法只有 chrome 有用
  {
    show("onbegin");
  }
/////////
  a1.addEventListener("endEvent",function()
  {
    show("endEvent");
  });
  a1.onend=function()//這個用法只有 chrome 有用
  {
    show("onend");
  }
///////// safari 和 iphone 不支援 repeat 
  a1.addEventListener("repeatEvent",function()
  {
    show("repeatEvent");
  });
  a1.onrepeat=function()//這個用法只有 chrome 有用
  {
    show("onrepeat");
  }
  $("#a120701_start").on("click",function()
  {
    a1.beginElement();
  });
  $("#a120701_stop").on("click",function()
  {
    a1.endElement();
  });
  function show(msg)
  {
    tt=a1.getCurrentTime().toFixed(2);
    hh=tt+":"+msg+"\n"+hh;
    $("#a120701_status").html(hh);
  }
  function update()
  {
    if (!a1) return;
    tt=a1.getCurrentTime().toFixed(2);
    $("#a120701_time").html(tt);
    let r1=document.getElementById("a120701_r1");
    let ax=r1.x.animVal.value.toFixed(2);
    $("#a120701_xloc").html(ax);
    setTimeout(update,100);    
  }
  update();
})
</script> 
</div>

既然可以用 javascript 控制，那麼先來修改一下上一篇的時鐘，來把時間調成目前時間
  
```
$mmcode(r2)
```
<div class="mmresult r2">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" stroke="#000">
<circle id="a120702_o1" cx="150" cy="150" r="140" fill="none" stroke="#000" stroke-width="2"></circle>
<g id="a120702_g3">
<g id="a120702_g2">
<g id="a120702_g1" stroke="#00f">
<line x1="10" y1="150" x2="40" y2="150" stroke-width="3"></line>
<defs>
<line id="a120702_d1" x1="10" y1="150" x2="20" y2="150" stroke="#f00"></line>
</defs>
<use xlink:href="#a120702_d1" transform="rotate(6,150,150)"></use>
<use xlink:href="#a120702_d1" transform="rotate(12,150,150)"></use>
<use xlink:href="#a120702_d1" transform="rotate(18,150,150)"></use>
<use xlink:href="#a120702_d1" transform="rotate(24,150,150)"></use>
</g>
<use xlink:href="#a120702_g1" transform="rotate(30,150,150)"></use>
<use xlink:href="#a120702_g1" transform="rotate(60,150,150)"></use>
</g>
<use xlink:href="#a120702_g2" transform="rotate(90,150,150)"></use>
</g>
<use xlink:href="#a120702_g3" transform="rotate(180,150,150)"></use>
<line id="a120702_hh" x1="150" y1="150" x2="150" y2="80" stroke-width="10">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="43200s" repeatCount="indefinite"></animateTransform>
</line>
<line id="a120702_mm" x1="150" y1="150" x2="150" y2="50" stroke-width="6">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="3600s" repeatCount="indefinite"></animateTransform>
</line>
<line id="a120702_ss" x1="150" y1="150" x2="150" y2="30" stroke-width="2" stroke="#f00">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="60s" repeatCount="indefinite"></animateTransform>
</line>
<circle id="o2" cx="150" cy="150" r="8"></circle>
</svg>
<script>
$(()=>
{
  let tt=new Date();
  let hh=tt.getHours();
  let mm=tt.getMinutes();
  let ss=tt.getSeconds();
//
  if (hh>12) hh-=12;
//
  let ahh=$("#a120702_hh > animateTransform");
  let amm=$("#a120702_mm > animateTransform");
  let ass=$("#a120702_ss > animateTransform");
//
  let dh=360*(hh+(mm/60)+(ss/3600))/12;
  ahh.attr("values",dh+",150,150;"+(dh+360)+",150,150");
//    
  let dm=360*(mm+ss/60)/60;
  amm.attr("values",dm+",150,150;"+(dm+360)+",150,150");
//
  let ds=360*ss/60;
  ass.attr("values",ds+",150,150;"+(ds+360)+",150,150");
//
});
</script>  
</div>
  
# 新增物件
  
SVG 由於命名空間的問題，用 html 的 append 新增html字串時不會有反應, 之前用過一個技巧，就是重寫裡頭的 html 來產生效果，其實更正確的方式是，建立一個屬於 svg 命名空間的物件，就可以用 append 加入了，方法如下：
  
```
  var obj=document.createElementNS('http://www.w3.org/2000/svg', "tag 名稱，例如 rect");
  
  建立 obj 後可以用
  
  obj.setAttribute("參數",值);
  或用 jquery
  $(obj).attr("參數",值);
  
```

範例如下：
  
```
$mmcode(r3)
```
  
<div class="mmresult r3">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<g id="a120703_g1">
<rect id="a120703_r1" x="10" y="10" width="30" height="30" stroke="#f00" fill="#ff0"/>
</g>
</svg><br>
<button id="a120703_b1">用append新增</button>
<button id="a120703_b2">重新寫入html</button>
<button id="a120703_b3">用createElementNS新增</button>
<br>
<script>
$(()=>
{
  let yloc=50;
  $("#a120703_b1").on("click",()=>
  {
    let i;
    let hh="";
    for (i=0;i<3;i++)
    {
      hh+='<rect id="a120703_h'+(yloc+i)+'" x="'+(10+i*40)+'" y="'+yloc+'" width="30" height="30" stroke="#00f" fill="#0ff"/>';
    }
    $("#a120703_g1").append(hh);//append 後，原始碼有新增，但是沒效果
    yloc+=40;
  });
  $("#a120703_b2").on("click",()=>
  {
    $("#a120703_g1").html($("#a120703_g1").html());//重寫整個 html 後才有效
  });
  $("#a120703_b3").on("click",()=>
  {
    let i;
    let hh="";
    for (i=0;i<3;i++)
    {
      let o=document.createElementNS('http://www.w3.org/2000/svg', "rect");//建立一個 svg 命名空間的物件
      let id="a120703_h"+(yloc+i);
      o.setAttribute("id", id);//設定該物件的 ID
      $("#a120703_g1").append(o);//把物件 append 上去，因為是同一個命名空間，會立刻出現
      $("#"+id).attr("x",(10+i*40));//已經 append 後，可以用 jquery 操作
      $(o).attr("y",yloc);//也可以直接用物件的方式修改屬性
      $(o).attr("width",30);
      $(o).attr("height",30);
      $(o).attr("stroke","#00f");
      $(o).attr("fill","#a0f");
    }
    yloc+=40;
  });
});
</script>  
</div>

2020年12月2日星期三

SVG 動畫

SVG 的動畫相當有趣也相當靈活，甚至可以互動，感覺上已經超越單純的動畫了
  
跟動畫相關的指令有 set, animate, animateTransform, animateMotion 
  
# set
  
首先先來一個 set 的範例

```
attributeName="屬性"
begin="開始的時機"
to="要改的值"
  
```
begin 可以用 1s(1秒) , 100ms (0.1秒) , 或各種 event，
當時機為 **時間** 時，代表的是該物件出現後開始計算時間
  
詳細的資料可以看[這裡](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin)
  
```
$mmcode(r1)  
```

<div class="mmresult r1">  
<div id="a120201_svg1">
<svg height="70">
<defs>
<g id="a120201_g1"> 
<rect id="a120201_rect1" width="50" height="50" x="10" y="10" fill="#f00">
  <set attributeName="x" to="20" begin="1s"/>
  <set attributeName="x" to="30" begin="2s"/>
  <set attributeName="x" to="40" begin="3s"/>
  <set attributeName="x" to="50" begin="4s"/>
  <set attributeName="x" to="60" begin="5s"/>
  <set attributeName="x" to="70" begin="6s"/>
  <set attributeName="x" to="80" begin="7s"/>
  <set attributeName="x" to="90" begin="8s"/>
</rect>
</g>
</defs>
<use xlink:href="#a120201_g1"/>
</svg>
</div>
<div id="a120201_svg2">
</div>
<br>
<button id="a120201_b1" style="font-size:1em;background-color:#aff">GO</button>
<script>
$(function() 
{ 
  $("#a120201_b1").on("click",function()
  {
    let i; 
    let hh="";
    for (i=0;i<30;i++)
    {
      hh+='<set attributeName="x" to="'+(i*10+20)+'" begin="'+((i+1)*50)+'ms"/>';
    }
    $("#a120201_rect1").html(hh);
    $("#a120201_svg1").css("display","none");
    $("#a120201_svg2").html('<svg width="100%" height="70">'
                            +$("#a120201_g1").html()+'</svg>');
  });
})
</script>
</div>

# animate

```
attributeName="屬性"
begin="開始的時機"
end="結束的時機"
from="開始的值"，(可以用 values 取代)
to="結束的值"，(可以用 values 取代)
by="相對from的值"，例如 from="30", to="50" 最後的值是 50 , 如果用 by="50" , 最後的值是 80
values="要改變的值" ，可以用分號區挌，指定多個值，例如: "10;50;10"
keyTimes="運行時間比"，用分號區格，為 0 到 1 的數值，用來指定每一個 values 運行時間 
keySplines="貝式曲線的時間"，四個值，和 css 的 Cubic Bezier 很像，必須設定 calcMode="spline" 才有作用
calcMode="模式"，discrete, linear (預設) , paced, spline  
dur="時間"  
max="時間"，動畫執行到這個時間後停止
repeatCount="重覆次數"，indefinite 為不斷重覆
restart="觸發 begin 後的動作"，always(預設)，whenNotActive(啟動狀態不重新開始)，never(不重新啟動)
fill="end 觸發後的狀態"，freeze(凍結在目前狀態)，remove(回到初始狀態)
accumulate="累加"，none(預設)，sum(累加), 在累加狀態時，動畫 repeat 不會回到初始狀態
  
```
  
先來一個簡單的範例，values 和 keyTimes 的數量必須一樣，keyTimes 的時間比由 0 到 1 ，數值必須越來越大
  
紅色方塊沒有設定 keyTimes ，時間比例和數值是平均分布，
等同 keyTimes="0;0.33;0.67;1"<br>
紫色方塊設定 calcMode="discrete"，沒有動畫直接跳過去<br>
綠色方塊設定 keyTimes="0;0.6;0.9;1" ，一開始走很慢，後面跑很快<br>
橘色方塊設定 calcMode="paced" , 行走速度不受分段影響<br>
藍色方塊設定了 keySplines ，要記得加上 calcMode="spline" 
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">
<svg width="300" height="300">
<rect fill="#f00" x="10" y="10" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" repeatCount="indefinite" />
</rect>
<rect fill="#a0f" x="10" y="60" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" calcMode="discrete" repeatCount="indefinite" />
</rect>
<rect fill="#0a0" x="10" y="110" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" keyTimes="0;0.6;0.9;1" repeatCount="indefinite" />
</rect>
<rect fill="#fa0" x="10" y="160" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" keyTimes="0;0.6;0.9;1" calcMode="paced" repeatCount="indefinite" />
</rect>
<rect fill="#00f" x="10" y="210" width="40" height="40">
  <animate attributeName="x" values="10;200;10" begin="0s" dur="2s" keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1;0 0.5 0.75 0" calcMode="spline" repeatCount="indefinite" />
</rect>
</svg>
</div>
  
# begin , end
  
svg 動畫中的 begin 和 end 很有意思，可以做到基本的互動，讓動晝不再只是動畫，<br>
可以用 `<a xlink:href="#id">click</a>` 來觸發 begin ，也可以從 html 去觸發，方法如下：<br>
詳細 API 可以參考[這裡](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement)
  
```
  document.getElementById('animate ID').beginElement();
  
```

begin 和 end 的值如下:
  
```
  
時間(1s,100ms)       時間到開始執行
id.[event]          例如 id.click ，當 id 被點擊時觸發，可以用 id.click+1s 表示點擊後過1秒
id.begin            當 id 動畫開始時
id.end              當 id 動畫結束時
id.repeat(n)        當 id 動畫重覆 n 次後，(經實測，在 iphone 及 safari 無作用)
  
[event 列表]
  
focus, blur, focusin, focusout, activate, auxclick, 
click, dblclick, mousedown, mouseenter, mouseleave, 
mousemove, mouseout, mouseover, mouseup, 
wheel, beforeinput, input, keydown, keyup, 
compositionstart, compositionupdate, compositionend, 
load, unload, abort, error, select, resize, scroll,
  
```

來看一個範例  
  
```
$mmcode(r3)
```
  
<div class="mmresult r3">
<style>
.a120203_s1
{
  font-size:20px;
  dominant-baseline:hanging;
}
</style>
<button onclick="document.getElementById('a120203_a1').beginElement();" style="font-size:1.5em;">HTML 的點我開始</button><br><br>
                                                                   
<svg width="300" height="200">
<a xlink:href="#a120203_a1">
  <rect x=8 y=18 width=84 height=22 fill="#ff0"/>
  <text x="10" y="20" class="a120203_s1">點我開始</text>
</a>
<g id="a120203_end1">
  <rect x=98 y=18 width=84 height=22 fill="#0ff"/>
  <text x="100" y="20" class="a120203_s1">點我停止</text>
</g>
<g id="a120203_c1" stroke-width="1" fill="#000">
  <text x="250" y="76">方塊一</text>
  <text x="250" y="126">方塊二</text>
  <animate attributeName="stroke" values="#000;#f00;#fa0;#00f" dur="2s" repeatCount="indefinite" begin="a120203_c1.mouseover" end="a120203_c1.mouseout" fill="freeze"/>
</g>
<rect fill="#f00" x="10" y="50" width="40" height="40">
  <animate id="a120203_a1" attributeName="x" values="10;200;10" begin="indefinite;a120203_a1.repeat(3)" end="a120203_end1.click" dur="2s" repeatCount="indefinite" />
  <set attributeName="fill" to="#0f0" begin="a120203_a1.repeat(1)"/>
  <set attributeName="fill" to="#ff0" begin="a120203_a1.repeat(2)"/>
  <set attributeName="fill" to="#f00" begin="a120203_a1.repeat(3)"/>
</rect>
<rect fill="#00f" x="10" y="100" width="40" height="40">
  <animate attributeName="x" values="10;200;10" begin="a120203_a1.end+600ms" end="a120203_end1.click" dur="2s" repeatCount="indefinite" />
</rect>
</svg>  
  
</div>  
  
# accumulate
  
這個累加的設定，我還沒想到應用的地方，範例如下 :
  
每次 repeat 顏色都會改變，有加 accumulate="sum" 的方塊，在 repeat 時並沒有回到初始狀態，
而是以當前位置為原點，by=10 跑到 by=50 (以第一次 repeat 來說，會從 x=60 開始)
  
這個範例在 chrome 和 firefox 的結果又有點不同，我覺得 firefox 比較正確
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">
<svg width="300" height="200">
<text x=10 y=20>accumulate="none"</text>
<rect fill="#f00" x="10" y="30" width="40" height="40">
  <animate id="a120204_a1" attributeName="x" values="10;50" begin="0s;a120204_a1.repeat(3)" dur="2s" repeatCount="indefinite" ></animate>
  <set attributeName="fill" to="#0f0" begin="a120204_a1.repeat(1)"></set>
  <set attributeName="fill" to="#fa0" begin="a120204_a1.repeat(2)"></set>
  <set attributeName="fill" to="#f00" begin="a120204_a1.repeat(3)"></set>
</rect>
<text x=10 y=110>accumulate="sum"</text>
<rect fill="#f00" x="10" y="120" width="40" height="40">
  <animate id="a120204_a2" attributeName="x" values="10;50" begin="0s;a120204_a2.repeat(3)"  dur="2s" repeatCount="indefinite" accumulate="sum"></animate>
  <set attributeName="fill" to="#0f0" begin="a120204_a2.repeat(1)"></set>
  <set attributeName="fill" to="#fa0" begin="a120204_a2.repeat(2)"></set>
  <set attributeName="fill" to="#f00" begin="a120204_a2.repeat(3)"></set>
</rect>
</svg>  
</div>

# animateTransform  
  
除了本來 animate 的參數外，還多了幾個
  
```
type="transform 的種類"  
additive="取代或累加"，replace(預設), sum(效果累加)   
  
```

範例如下 :
  
```
$mmcode(r5)
```
<div class="mmresult r5">
圖1： 設定 transform scale 從 1 到 2<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa">
  <rect x="40" y="40" width="40" height="40" fill="#f00">
    <animateTransform attributeName="transform" type="scale" values="1;2" dur="2s" begin="0s" repeatCount="indefinite"/>
  </rect>
</svg><br><br>
圖2： 設定 transform scale 從 1 到 2 ，並且 translate 移動方塊中心點，這個時候必須加上 <font color="#00f">additive="sum"</font> ，兩個 transform 的設定才會累加<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa">
  <rect x="40" y="40" width="40" height="40" fill="#f00">
    <animateTransform attributeName="transform" type="translate" values="0,0;-60,-60" dur="2s" begin="0s" repeatCount="indefinite" additive="sum"/>
    <animateTransform attributeName="transform" type="scale" values="1;2" dur="2s" begin="0s" repeatCount="indefinite" additive="sum"/>
  </rect>
</svg>
</div>

# animateMotion
  
這個功能相當有趣，可以規劃一條路徑，讓物件跟著路徑跑，除了本來 animate 的參數外，還多了一些參數
  
```
path="和 path 的 d 相同"
rotate="角度"，auto(隨著路線自動轉)|auto-reverse(隨著路線自動轉再加 180 度)
keyPoints="設定中間點"，為 0 到 1 的值，搭配 keyTimes 來調整每一段的速度，要記得設定 calcMode 才有作用  
```
  
除了參數外，在 animateMotion 中可以使用 mpath 來取代參數 path , 這樣可以利用 xlink:href 來使用別處定義好的路徑

先來一個範例：
  
紅球用參數 path 來設定路徑，藍色方塊和綠三角使用 mpath 來串接 #a12026_p1 這條路徑，
綠三角有設定 keyPoints 和 keyTimes，讓路徑不同區段有不同速度
  
```
$mmcode(r6)
```
  
<div class="mmresult r6">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<g stroke="#000" fill="none">
<path id="a120206_p1" d="M30,30 Q30 300 230,30z"/>
<circle cx="0" cy="0" r="10" fill="#f006">
  <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" path="M30,30 Q30 300 230,30z"/>
</circle>
<rect x="-30" y="0" width="60" height="20" fill="#00f6">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
  <mpath xlink:href="#a120206_p1"/>
</animateMotion>
</rect>
<path d="M0,0 L10,30 L-10,30z" fill="#0f06">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse" keyPoints="0;0.65;1" keyTimes="0;0.9;1" calcMode="linear">
  <mpath xlink:href="#a120206_p1"/>
</animateMotion>
</path>
</g>
</svg>
</div>  
  
那麼最後就用一個SVG的時鐘做為這一篇的結束

```
$mmcode(r7)  
```
<div class="mmresult r7">
<style>
#a120207_g1
{
  stroke:#00f
}
#a120207_d1
{
  stroke:#f00
}
</style>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:ev="http://www.w3.org/2001/xml-events" stroke="#000">
<circle id="a120207_o1" cx=150 cy=150 r=140 fill="none" stroke="#000" stroke-width="2"/>
<g id="a120207_g3">
<g id="a120207_g2">
<g id="a120207_g1">
<line x1=10 y1=150 x2=40 y2=150 stroke-width="3"/>
<defs>
<line id="a120207_d1" x1=10 y1=150 x2=20 y2=150/>
</defs>
<use xlink:href="#a120207_d1" transform="rotate(6,150,150)"/>
<use xlink:href="#a120207_d1" transform="rotate(12,150,150)"/>
<use xlink:href="#a120207_d1" transform="rotate(18,150,150)"/>
<use xlink:href="#a120207_d1" transform="rotate(24,150,150)"/>
</g>
<use xlink:href="#a120207_g1" transform="rotate(30,150,150)"/>
<use xlink:href="#a120207_g1" transform="rotate(60,150,150)"/>
</g>
<use xlink:href="#a120207_g2" transform="rotate(90,150,150)"/>
</g>
<use xlink:href="#a120207_g3" transform="rotate(180,150,150)"/>
<line id="a120207_hh" x1=150 y1=150 x2=150 y2=80 stroke-width="10">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="1440s" repeatCount="indefinite"/>
</line>
<line id="a120207_mm" x1=150 y1=150 x2=150 y2=50 stroke-width="6">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="120s" repeatCount="indefinite"/>
</line>
<line id="a120207_ss" x1=150 y1=150 x2=150 y2=30 stroke-width="2" stroke="#f00">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="2s" repeatCount="indefinite"/>
</line>
<circle id="o2" cx=150 cy=150 r=8/>
</svg>
  
</div>

2020年11月27日星期五

SVG 的文字

以前自己開發繪圖函式庫時，字都是自己畫，一開始是抓倚天中文的字形檔，後來用自己的方式產生自己的字形檔，並加上 alpha 來做反鋸齒，當時還為了開發泰國版本，自行設計泰文輸入法，雖然可以使用 truetype 字形，但是當時硬體規格太差，為了速度，還是要自己寫效率比較高，現在看到 SVG 文字相關的定義，真的覺得當初自己所想到的功能太陽春，SVG 的規劃要完整多了。

## text 的參數如下：
```css
x,y                座標
dx,dy              偏移
rotate             旋轉
lengthAdjust       spacing (預設) 字與字之間以空白做間隔
                   spacingAndGlyphs  字與字之間以變形填滿
textLength         字串長度
text-anchor        start , middle , end 文字定位

以下參數也可以做為 CSS 的參數
  
dominant-baseline  auto (預設)
                   text-bottom
                   alphabetic
                   ideographic
                   middle
                   central
                   mathematical
                   hanging
                   text-top
writing-mode       horizontal-tb
                   vertical-rl
                   vertical-lr  
```

先來一個簡單範例

```
$mmcode(r1)
```

可以發現，SVG 的字完全就是用畫的，像多邊形一樣，所以右邊的文字有加上 `stroke-linejoin="round"` 在角落的地方就成了圓角

文字處理另一個麻煩的就是基準線，這裡使用的是 dominant-baseline ，可以當作參數，也可以當作 CSS 使用

CSS 的文字有個很特別的設計，利用類似陣列的方式為每一個字設定屬性
```
$mmcode(r3)
```
<div class="mmresult r3">
<svg width="300" height="100" style="background-color:#ffa">
<text x="10,20,40,80,150" y="60,70,50" fill="#000" style="font-size:32px;">abcde</text>
</svg>
</div>

也可以用 dx 和 dy 做偏移

```
$mmcode(r4)
```
<div class="mmresult r4">
<svg width="300" height="100" style="background-color:#ffa">
<text x="10" y="60" dx="0,10,20,30,40" dy="0,10,20,-40" fill="#000" style="font-size:32px;">abcde</text>
</svg>
</div>

可以用 rotate 旋轉, 而旋轉預設的中心點在左下角

```
$mmcode(r5)
```
<div class="mmresult r5">
<svg width="300" height="100" style="background-color:#ffa">
<text x="10" y="60" rotate="0,30,60,90,-40,0,0,90,-90" fill="#000" style="font-size:32px;" >abcde ddd</text>
</svg>
</div>

textLength 和 lengthAdjust 搭配，設定字串長度後，看要用空白還是變形的方式填空間
```
$mmcode(r6)
```
<div class="mmresult r6">
<svg width="320" height="200" viewBox="0 0 420 200" style="background-color:#ffa">
<text x="10" y="40" textLength="300" lengthAdjust="spacing" fill="#000" style="font-size:32px;" >abcde</text>
<text x="10" y="80" textLength="300" lengthAdjust="spacingAndGlyphs" fill="#000" style="font-size:32px;" >abcde</text>
<text x="10" y="120" textLength="60" lengthAdjust="spacingAndGlyphs" fill="#000" style="font-size:32px;" >abcde</text>
<text x="360" y="20" textLength="140" lengthAdjust="spacingAndGlyphs" fill="#000" style="font-size:32px;writing-mode:vertical-lr" >直寫測試123</text>
</svg>
</div>

# tspan
  
當一段文字想要有不同設定時，可以用 tspan ，就如同 css 的 span 一樣，搭配 dominant-baseline 就可以做到上標字和下標字的效果，
  
<font style="color:#f00;font-size:1.5em">*經實測結果 Firefox 會不正常顯示</font>，以下正確結果應該顯示為 <font style="color:#00f;font-size:1.5em">X₂＋Y²＝Z⁽²ⁿ⁺¹⁾</font>

```
$mmcode(r7)
```
<div class="mmresult r7">
<style>
.a112707_central
{
  dominant-baseline:central;
}
.a112707_up
{
  font-size:0.6em;
  dominant-baseline:auto;
}
.a112707_down
{
  font-size:0.6em;
  dominant-baseline:hanging;
}
</style>
<svg width="320" height="200" style="background-color:#ffa">
<text x="10" y="40" fill="#000" style="font-size:32px;" >abc<tspan fill="#f00">123</tspan>def<tspan style="font-size:48px">def</tspan>ghi</text>
<text x="10" y="100" fill="#000" style="font-size:32px;" class="a112707_central">
X
<tspan class="a112707_down">2</tspan>
+Y
<tspan class="a112707_up">2</tspan>
=Z
<tspan class="a112707_up">(2n+1)</tspan>
</text>
</svg>
</div>

如果要完全相容的上標和下標字，似忽只有利用 dy 來實作，但是這個缺點就是，沒辦法單純用 css 來完成，而且 `<tspan>` 的定義很奇怪，一但 dy 改變了，就是改變了，並不會在 `</tspan>` 時變回來，所以在使用上標字(dy 減去某個值) ，必須在下一個顯示的字把 dy 的值加回來。

```
$mmcode(r8)
```
<div class="mmresult r8">
<style>
.a112708_normal
{
  font-size:1em;
}
.a112708_up
{
  font-size:0.6em;
}
.a112708_down
{
  font-size:0.6em;
}
</style>
<svg width="320" height="100" style="background-color:#ffa">
<text x="10" y="60" fill="#000" style="font-size:32px;" >
<tspan class="a112708_normal">X</tspan>
<tspan class="a112708_down" >2</tspan>
<tspan class="a112708_normal">+Y</tspan>
<tspan class="a112708_up" dy="-1em">2</tspan>
<tspan class="a112708_normal" dy="0.6em">=Z</tspan>
<tspan class="a112708_up" dy="-1em">(2n+1)</tspan>
</text>
</svg>
</div>
  
為了處理上標和下標問題，只好利用 javascript 來協助，加上 svgsup 和 svgsub 兩個 class ，由 javascript 來處理 dy 的問題，程式碼很簡單，效果也不錯
  
```
$mmcode(svgsup)
```  
<div class="mmresult svgsup">
<style>
.svgsup,.svgsub
{
  font-size:0.6em;
}
</style>
<svg width="320" height="100" style="background-color:#ffa">
<text x="10" y="60" fill="#000" style="font-size:32px;">
<tspan>X</tspan>
<tspan class="svgsub">2</tspan>
<tspan>+Y</tspan>
<tspan class="svgsup">2</tspan>
<tspan>=Z</tspan>
<tspan class="svgsup">(2n+1)</tspan>
</text>
</svg>

# textPath
  
SVG 有個有趣的東西叫 textPath ，文字可以隨著路徑跑，這個功能當初我在設計網頁上的向量地圖時曾經用來顯示路名

當初在寫導航程式顯示路名時，字隨路徑走是用比較偷懶的方式，計算出每個字的座標，但是字不會旋轉，隨著現在硬體規格越來越強，加上 SVG 有這麼方便的指令，要開發 2D 地圖真的簡單多了。

```
$mmcode(r9)
```
<div class="mmresult r9">
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<defs>
  <path id="a112709_p1" d="M20,100 Q100,0 200,100 Q300,200 380,100"/>
</defs>
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112709_p1">文字可以隨著路徑跑
  </textPath>
</text>
</svg>
<br><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112709_p1" startOffset="100">startOffset="100"
  </textPath>
</text>
</svg>
<br><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112709_p1">可以使用<tspan fill="#f0f" dy="-20" style="font-size:32px">tspan</tspan><tspan dy="20" fill="#00f">來做效果</tspan>
  </textPath>
</text>
</svg>
<br><br><font color="#f00"><b>這個設定在 iPhone 及 safari 沒用</b></font><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;" dominant-baseline="central">
  <textPath href="#a112709_p1">dominant-baseline="central"
  </textPath>
</text>
</svg>
<br><br>
<svg width="320" height="200" viewBox="0 0 400 200" style="background-color:#ffa">
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"/>
<text fill="#000" style="font-size:24px;writing-mode:vertical-lr;">
  <textPath href="#a112709_p1">直式書寫 writing-mode:vertical-lr;
  </textPath>
</text>
</svg>

</div>

文字可以隨著路徑跑，那麼是不是可以取得路徑長度後，計算每個字的間距，讓字平均分布呢 ?

方法如下 :
  
```
  let pp  = document.getElementById("[path 的 ID]");
  let len = pp.getTotalLength(); //取得路徑總長度
  let xy  = pp.getPointAtLength(500); //取得距離 500 的點位 , return {x:n,y:m}
  let box = pp.getBBox(); //取得路徑範圍 , return {x:n,y:n,width:n,height:n}
  
```

取得長度後就可以計算平均分布的位置  
  
```
$mmcode(r10)
```

<div class="mmresult r10">
<svg width="300" height="300" style="background-color:#ffa">
<defs>
  <path id="a112710_p1" d="M30,150 a1,1,0,0,1,240,0 a1,1,0,0,1,-240,0"></path>
</defs>
<use xlink:href="#a112710_p1" fill="none" stroke="#fa0" stroke-width="2"></use>
<text fill="#000" style="font-size:24px;">
  <textPath href="#a112710_p1">
    <tspan id="a112710_txt">文字可以隨著路徑跑喲</tspan>
  </textPath>
</text>
</svg>
<script>
$(function()
{
  let pp = document.getElementById("a112710_p1");
  let len = pp.getTotalLength();
  let txt=$("#a112710_txt");
  let txtlen=txt.html().length;
  let i;
  let hh="";
  let j=len/txtlen;
  for (i=0;i<txtlen;i++)
  {
    hh+=j*i+" ";
  }
  txt.attr("x",hh);  
})
</script>  
</div>

訂閱：文章 (Atom)

Translate

2020年12月7日 星期一