TP Notes: 2020

2020年12月24日星期四

有趣的 SVG filter - 創造紋理

雖然知道 feTurbulence  可以用來創造很多假的紋路，例如之前做的雲一樣，但是對於非美術專長的我來說，還是無法運用熟練，參考了幾個範例，自己練習做幾個試試，很多會利用光線來達到凹凸材質的展現，相當有意思
  
```
$mmcode(r1)  
```
<div class="mmresult r1">
有紋路的紙<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="a122401_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="fractalNoise" baseFrequency="0.03 0.06" 
      numOctaves="10" result="a122401_t1" seed="1"/>
    <feSpecularLighting in="a122401_t1" lighting-color="#eed" 
      specularExponent="2" surfaceScale="4" result="a122401_L1">
      <feDistantLight azimuth="45" elevation="30" />    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122401_L1" in2="SourceGraphic"/>
  </filter>
</defs>
  <rect x=0 y=0 width=100% height=100% fill="#aaa" style="filter: url(#a122401_f1)"/>
</svg>
</div>

```
$mmcode(r2)  
```
<div class="mmresult r2">
岩石<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="a122402_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="fractalNoise" baseFrequency="0.03 0.06" numOctaves="10" result="a122402_t1" seed="1"/>
    <feSpecularLighting in="a122402_t1" lighting-color="#fff" specularExponent="20" surfaceScale="3" result="a122402_L1">
      <feDistantLight azimuth="45" elevation="30" />    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122402_L1" in2="SourceGraphic"/>
  </filter>
</defs>
  <rect x=0 y=0 width=100% height=100% fill="#000" style="filter: url(#a122402_f1)"/>
</svg>
</div>
  
```
$mmcode(r3)  
```
<div class="mmresult r3">
好像某種牆壁的紋路<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="a122403_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="fractalNoise" baseFrequency="0.01 0.06" numOctaves="10" result="a122403_t1" seed="1"/>
    <feSpecularLighting in="a122403_t1" lighting-color="#fff" specularExponent="4" surfaceScale="3" result="a122403_L1">
      <feDistantLight azimuth="45" elevation="30" />    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122403_L1" in2="SourceGraphic"/>
  </filter>
</defs>
  <rect x=0 y=0 width=100% height=100% fill="#888" style="filter: url(#a122403_f1)"/>
</svg>
</div>
  
```
$mmcode(r4)  
```
<div class="mmresult r4">
好像某種牆壁的紋路<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<defs>
  <filter id="a122404_f1" filterUnits="userSpaceOnUse">
    <feTurbulence baseFrequency="0.01 0.06" numOctaves="1" result="a122404_t1" seed="1"/>
    <feSpecularLighting in="a122404_t1" lighting-color="#fff" specularExponent="4" surfaceScale="5" result="a122404_L1">
      <feDistantLight azimuth="45" elevation="30" />    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122404_L1" in2="SourceGraphic"/>
  </filter>
</defs>
  <rect x=0 y=0 width=100% height=100% fill="#555" style="filter: url(#a122404_f1)"/>
</svg>
</div>

```
$mmcode(r12)  
```
<div class="mmresult r12">
好像某種牆壁的紋路<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="a122412_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="fractalNoise" baseFrequency="0.003 0.01" numOctaves="10" result="a122412_t1" seed="1"></feTurbulence>
    <feSpecularLighting in="a122412_t1" lighting-color="#eee" specularExponent="1" surfaceScale="60" result="a122412_L1">
      <feDistantLight azimuth="45" elevation="30"></feDistantLight>    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122412_L1" in2="SourceGraphic"></feComposite>
  </filter>
</defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#ccc" style="filter: url(#a122412_f1)"></rect>
</svg>
</div>
  
```
$mmcode(r5)  
```
<div class="mmresult r5">
髮絲紋 ?<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<defs>
  <filter id="a122405_f1" filterUnits="userSpaceOnUse">
    <feTurbulence baseFrequency="0.5 0.03" numOctaves="1" result="a122405_t1" seed="1"/>
    <feSpecularLighting in="a122405_t1" lighting-color="#fff" specularExponent="2" surfaceScale="3" result="a122405_L1">
      <feDistantLight azimuth="45" elevation="20" />    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122405_L1" in2="SourceGraphic"/>
  </filter>
</defs>
  <rect x=0 y=0 width=100% height=100% fill="#000" style="filter: url(#a122405_f1)"/>
</svg>
</div>

```
$mmcode(r6)  
```
<div class="mmresult r6">
不曉得像什麼<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<defs>
  <filter id="a122406_f1" filterUnits="userSpaceOnUse">
    <feTurbulence baseFrequency="0.008 0.06" numOctaves="1" result="a122406_t1" seed="1"/>
    <feSpecularLighting in="a122406_t1" lighting-color="#fff" specularExponent="60" surfaceScale="30" result="a122406_L1">
      <feDistantLight azimuth="45" elevation="60" />    
    </feSpecularLighting>
    <feFlood flood-color="#000" result="a122406_fd1"/>
    <feComposite operator="atop" in="a122406_fd1" in2="a122406_L1" result="a122406_fe1"/>
    <feComposite operator="atop" in="a122406_fe1" in2="SourceGraphic"/>
  </filter>
</defs>
  <rect x=0 y=0 width=100% height=100% fill="#eee" style="filter: url(#a122406_f1)"/>
</svg>
</div>

```
$mmcode(r8)  
```
<div class="mmresult r8">
木頭紋理<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff">
<defs>
  <filter id="a122408_f1" x="0" y="0" width="100%" height="100%">
    <feFlood flood-color="#722" result="a122408_fd1"/>
    <feFlood flood-color="#ea0" result="a122408_fd2"/>
    <feTurbulence type="fractalNoise" baseFrequency="0.005 0.06" numOctaves="1" seed="1" >
    </feTurbulence>
    <feComponentTransfer color-interpolation-filters="sRGB" result="a122408_ft1">
        <feFuncR type="discrete" tableValues="0 0"/>
        <feFuncG type="discrete" tableValues="0 0"/>
        <feFuncB type="discrete" tableValues="0 0"/>
        <feFuncA type="table" tableValues="0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
    </feComponentTransfer>
    <feComposite in="a122408_fd1" in2="a122408_ft1" operator="in" result="a122408_fcin"/>
    <feComposite in="a122408_fd2" in2="a122408_ft1" operator="out" result="a122408_fcout"/>
    <feComposite in="a122408_fcin" in2="a122408_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122408_f1)"></rect>
</svg>  
</div>

```
$mmcode(r9)  
```
<div class="mmresult r9">
好像蠻有藝術的紋理<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff">
<defs>
  <filter id="a122409_f1" x="0" y="0" width="100%" height="100%">
    <feFlood flood-color="#000" result="a122409_fd1"/>
    <feFlood flood-color="#fff" result="a122409_fd2"/>
    <feTurbulence baseFrequency="0.03 0.03" numOctaves="1" seed="1" >
    </feTurbulence>
    <feComponentTransfer color-interpolation-filters="linearRGB" result="a122409_ft1">
        <feFuncA type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
        <feFuncR type="discrete" tableValues="0 0"/>
        <feFuncG type="discrete" tableValues="0 0"/>
        <feFuncB type="discrete" tableValues="0 0"/>
    </feComponentTransfer>
    <feComposite in="a122409_fd1" in2="a122409_ft1" operator="in" result="a122409_fcin"/>
    <feComposite in="a122409_fd2" in2="a122409_ft1" operator="out" result="a122409_fcout"/>
    <feComposite in="a122409_fcin" in2="a122409_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122409_f1)"></rect>
</svg>  
</div>

```
$mmcode(r10)  
```
<div class="mmresult r10">
好像蠻有藝術的紋理<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff">
<defs>
  <filter id="a122410_f1" x="0" y="0" width="100%" height="100%">
    <feFlood flood-color="#000" result="a122410_fd1"/>
    <feFlood flood-color="#fff" result="a122410_fd2"/>
    <feTurbulence baseFrequency="0.03 0.03" numOctaves="5" seed="1" type="fractalNoise">
    </feTurbulence>
    <feComponentTransfer color-interpolation-filters="linearRGB" result="a122410_ft1">
        <feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
        <feFuncR type="discrete" tableValues="0 0"/>
        <feFuncG type="discrete" tableValues="0 0"/>
        <feFuncB type="discrete" tableValues="0 0"/>
    </feComponentTransfer>
    <feComposite in="a122410_fd1" in2="a122410_ft1" operator="in" result="a122410_fcin"/>
    <feComposite in="a122410_fd2" in2="a122410_ft1" operator="out" result="a122410_fcout"/>
    <feComposite in="a122410_fcin" in2="a122410_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122410_f1)"></rect>
</svg>  
</div>

```
$mmcode(r11)  
```
<div class="mmresult r11">
模擬地圖<br>  
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff">
<defs>
  <filter id="a122411_f1" x="0" y="0" width="100%" height="100%">
    <feFlood flood-color="#06a" result="a122411_fd1"/>
    <feFlood flood-color="#0f0" result="a122411_fd2"/>
    <feTurbulence baseFrequency="0.008 0.008" numOctaves="10" seed="2" type="fractalNoise">
    </feTurbulence>
    <feComponentTransfer color-interpolation-filters="linearRGB" result="a122411_ft1">
        <feFuncA id="a122411_kk" type="table" tableValues="0 0"/>
        <feFuncR type="discrete" tableValues="0 0"/>
        <feFuncG type="discrete" tableValues="0 0"/>
        <feFuncB type="discrete" tableValues="0 0"/>
    </feComponentTransfer>
    <feComposite in="a122411_fd1" in2="a122411_ft1" operator="in" result="a122411_fcin"/>
    <feComposite in="a122411_fd2" in2="a122411_ft1" operator="out" result="a122411_fcout"/>
    <feComposite in="a122411_fcin" in2="a122411_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122411_f1)"></rect>
</svg>  
<script>
$(function()
{
  let i;
  let hh="";
  for (i=0;i<127;i++)
  { 
    hh+=(i/200)+" ";
  }
  for (i=0;i<127;i++)
  { 
    hh+="1 ";
  }
  $("#a122411_kk").attr("tableValues",hh);
})
</script></div>
  
最後以這個火焰做為這篇的結束，對於非美術專長的我來說，能湊出這樣的火焰已經滿足了.....  
  
```
$mmcode(r7)  
```
<div class="mmresult r7">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#000">
<defs>
  <filter id="a122407_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="fractalNoise" baseFrequency="0.02 0.02" numOctaves="10" result="a122407_t1" seed="1">
    </feTurbulence>
    <feDisplacementMap in2="a122407_t1" in="SourceGraphic" scale="140" xChannelSelector="R" yChannelSelector="G"/>  
  </filter>
  <radialGradient id="a122407_rad1">
    <stop offset="0%" stop-color="#ff0f"></stop>
    <stop offset="100%" stop-color="#f000"></stop>
  </radialGradient>
</defs>
  <rect x=0 y=30 width=90% height=100% fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/>
  <ellipse cx=150 cy=200 rx=120 ry=200 fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/>
  <ellipse cx=150 cy=240 rx=120 ry=200 fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/>
  <ellipse cx=150 cy=260 rx=120 ry=200 fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/>
</svg>
  
<script>
$(()=>
{
  let i=1;
  function t()
  {
    $("#a122407_f1 feTurbulence").attr("seed",i);
    i++;
    if (i>199) i=0;
    if (i<200)
    {
      setTimeout(t,80);
    }
  }
  t();
})
</script>
</div>

2020年12月23日星期三

有趣的 SVG filter - feDisplacementMap

feDisplacementMap 是個很有趣的東西，可以用一張平面的圖把另一張平面的圖做扭曲變形，第一次看到時覺得非常驚豔，以往只能等美術人員畫好的圖，原來可以只靠濾鏡做到，也想不到怎麼做的，是用了什麼神奇的方法來描述整個變形，直到看到這個公式才大概理解整個做法。
  
參考資料：[這裡](https://drafts.fxtf.org/filter-effects/#feDisplacementMapElement)

<div style="background-color:#eee;padding:10px">
P'(x,y) ← P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
</div>

先來看一個範例
  
灰色是本來的圖，紅框是只有紅色在左上角的濾鏡，

當座標偏移都用綠色時，因為綠色=0 所以不會偏移, 本來的 座標 (x,y) 會變成 ( x + scale * (-0.5) , y + scale * (-0.5) ) ，
  
當切換到 R 時，(x,y) 理論上會是 ( x + scale * (0.5) , y + scale * (0.5) ) , 所以圖形往左上移動，然而實際上移動的座標並非 scale * 0.5 ，似忽和 R 的亮度值有關，
  
當切換到 A 時，這裡的設定是 7f ，也就是 0.5 , 於是圖形就回到原處沒有偏移
  
<font color="#f00" style="font-size:1.3em">*實測結果 Firefox 會不正常</font>  
  
```
$mmcode(r1)
```
  
<div class="mmresult r1">
<svg width="300" height="360"  xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" >
<defs>
  <filter id="a122301_f1" filterUnits="userSpaceOnUse">
    <feImage xlink:href="https://yiharng.github.io/pic_circle.jpg" x=0 y=0 width=280 height=280 result="a122301_t1"/>
    <feDisplacementMap in="a122301_t1" in2="SourceGraphic" scale="40" xChannelSelector="R" yChannelSelector="R">  
      <set attributeName="xChannelSelector" to="R" begin="a122301_cr.click"/>
      <set attributeName="yChannelSelector" to="R" begin="a122301_cr.click"/>
      <set attributeName="xChannelSelector" to="G" begin="a122301_cg.click"/>
      <set attributeName="yChannelSelector" to="G" begin="a122301_cg.click"/>
      <set attributeName="xChannelSelector" to="A" begin="a122301_ca.click"/>
      <set attributeName="yChannelSelector" to="A" begin="a122301_ca.click"/>
    </feDisplacementMap>
  </filter>
</defs>
  <rect x=0 y=0 width=150 height=150 fill="#ff00007f" style="filter: url(#a122301_f1)"/>
  <rect x=0 y=0 width=150 height=150 stroke="#f00" fill="none"/>
  <image href="https://yiharng.github.io/pic_circle.jpg" x=0 y=0 width=280 height=280 style="opacity:0.2"/>
  <text id="a122301_cr" x=10  y=340>Channel R</text>
  <text id="a122301_cg" x=100 y=340>Channel G</text>
  <text id="a122301_ca" x=190 y=340>Channel A</text>
</svg>
</div>

既然知道原理，那麼就可以弄個漸層來試試效果
  
```
$mmcode(r2)
```
<div class="mmresult r2">
  
原圖<br>
<img src="https://yiharng.github.io/cat280.jpg" width="280"><br>

濾鏡<br>
<svg width="300" height="280" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" >
<defs>
  <filter id="a122301_f2" filterUnits="userSpaceOnUse">
    <feImage xlink:href="https://yiharng.github.io/cat280.jpg" result="a122301_t2" x=-50 y=-20 />
    <feDisplacementMap in="a122301_t2" in2="SourceGraphic" scale="40" xChannelSelector="R" yChannelSelector="R" result="a122301_d2"/>
  </filter>
  <radialGradient id="a122301_rad1">
    <stop offset="0%" stop-color="#f00"></stop>
    <stop offset="100%" stop-color="#000"></stop>
  </radialGradient>
</defs>
  <ellipse cx="150" cy="140" rx="110" ry="110" fill="url(#a122301_rad1)" style="filter: url(#a122301_f2)"> 
  </ellipse>
</svg>
</div>

加上一些計算，可以做出水波效果
  
```
$mmcode(r3)  
```  
  
<div class="mmresult r3">
<svg width=280 height=210>
  <rect x=0 y=0 width=280 height=210 fill="url(#a122303_rad1)"/> 
</svg>
<svg width="280" height="210" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" >
<defs>
  <filter id="a122303_f1" filterUnits="userSpaceOnUse">
    <feImage xlink:href="https://yiharng.github.io/bird.jpg" result="a122303_t1" x=-20 y=-20 width=330 height=250/>
    <feDisplacementMap in="a122303_t1" in2="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="R" result="a122303_d1"/>
  </filter>
  <radialGradient id="a122303_rad1" cx="70%" cy="60%" r="100%">
    <stop offset="0.0" stop-color="#000">
      <animate attributeName="offset" to="0.2" dur="1s"
        repeatCount="indefinite"></animate>
    </stop>
    <stop offset="0.1" stop-color="#f00">
      <animate attributeName="offset" to="0.3" dur="1s"
        repeatCount="indefinite"></animate>
    </stop>
  </radialGradient>
</defs>
  <rect x=0 y=0 width=280 height=210 fill="url(#a122303_rad1)" filter="url(#a122303_f1)"/> 
</svg>
<script>
$(()=>
{
  let hh="";
  let i,j="f";
  let k=0.03;
  for (i=0;i<1;i+=k)
  {
    if (j=="0") j="f"; else j="0"
    hh+='<stop offset="'+(i.toFixed(2))+'" stop-color="#'+(j)+'00">'
       +'<animate attributeName="offset" to="'+((i+k*2).toFixed(2))
       +'" dur="1s" repeatCount="indefinite"></animate></stop>';
  }
  $("#a122303_rad1").html(hh);
})
</script>  
  
</div>
  
修改一下波的行徑方向，可以變成倒影，而這個範例卻又發現了 chrome 的 bug 
  
Firefox 是本來就看不到效果，但是倒影的圖片翻轉是正常的
  
Chrome 很奇怪的，圖片翻轉居然沒效......花了一些時間測試，在 svg 外層包一個 div 並旋轉 0.001 度好像可以解決這個 bug , 但是在某些情況下又不行...... 
  
```
  <div style="transform:rotate(0.001deg)">
    <svg>
      .
      .
      .
    </svg>
  </div>
```
  
Safari 正常
  
```
$mmcode(r6)
```
<div class="mmresult r6">
  
<div style="position:absolute;width:290px;height:200px;background:url(https://yiharng.github.io/bird280.jpg)">
</div>
<div style="height:190px;"></div>
<div style="transform:rotate(0.001deg)">
<svg width="290" height="200"  xmlns="http://www.w3.org/2000/svg" >
<defs>
  <filter id="a122306_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="turbulence" baseFrequency="0.01 0.1" numOctaves="2" result="a122306_tt">
    </feTurbulence>
    <feImage href="https://yiharng.github.io/bird280.jpg" x="-20" y="-30" width="320" height="240" preserveAspectRatio="none" result="a122306_bird"/>
    <feDisplacementMap in="a122306_bird" in2="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="R" result="a122306_d1">  
    </feDisplacementMap>
    <feDisplacementMap in="a122306_d1" in2="a122306_tt" scale="20" xChannelSelector="R" yChannelSelector="G">  
    </feDisplacementMap>
  </filter>
    <linearGradient id="a122306_linear1" x1="0" y1="0" x2="0" y2="1" spreadMethod="pad">
      <stop offset="0%" stop-color="#000"></stop>
      <stop offset="10%" stop-color="#f00"></stop>
      <stop offset="20%" stop-color="#000"></stop>
    </linearGradient>
</defs>
  <rect x=0 y=0 width=300 height=300 transform="scale(1,-1) translate(0,-200)" fill="url(#a122306_linear1)" filter="url(#a122306_f1)"/>
</svg>
</div>

</div>

2020年12月22日星期二

有趣的 SVG filter - feTurbulence

一直都在寫演算法及前後端架構程式，雖然對 2D/3D 計算還算略懂，自行開發的繪圖函式也只是基本的點、線、面、材質貼圖等，對於圖形學的東西接觸得不多，以前也只是和美術合作，由他們先做好圖我再拿來用，對於那些繪圖軟體怎麼計算出那些特效並不是很瞭解，開始玩 SVG 濾鏡後才慢慢理解，這些圖形學的演算法相當有趣，雖然可以由美術人員先做好再拿來用，如果自己做的話似忽可以做到更靈活的變化。
  
SVG 的濾鏡中 feTurbulence 就是一個當初想都沒想過的東西
  
參考資料：
  [這裡](https://drafts.fxtf.org/filter-effects/#feTurbulenceElement) , 
  [這裡](https://cdc.tencent.com/2019/07/18/%E9%9A%8F%E6%9C%BA%E4%B8%8D%E5%8F%AA%E6%98%AF-math-random-%E5%89%8D%E7%AB%AF%E5%99%AA%E5%A3%B0%E5%BA%94%E7%94%A8/) ,
  [這裡](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) , 
  [這裡](https://www.zhangxinxu.com/wordpress/2020/10/svg-feturbulence/), 和 
  [這裡](https://zh.wikipedia.org/wiki/Perlin%E5%99%AA%E5%A3%B0), 以及一個 
  [綜合教學](https://www.oxxostudio.tw/articles/201410/svg-tutorial.html)
  
這裡還有 C++ 的函式庫 [libnoise](http://libnoise.sourceforge.net/index.html) ，[libperlin](https://github.com/copperwater/libperlin)
  
參數說明
  
```
baseFrequency  基本頻率，預設 0 ，可以設兩個值 x y
numOctaves     倍頻數量，預設 1
seed           起始值，預設 0
stitchTiles    noStitch 不理會邊界(預設)，stitch 邊界平滑
type           turbulence 混亂(預設)，fractalNoise 分形噪聲
  
```
  
先來一個簡單範例
  
```
$mmcode(r1)
```

<div class="mmresult r1">
<svg width="300" height="440" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff">
<defs>
  <filter id="a122201_f1" x=0 y=0 width=100% height=100%>
    <feTurbulence type="turbulence" baseFrequency="0.02"
      numOctaves="1" seed="1">
      <set attributeName="type" to="turbulence" 
        begin="a122201_t1.click"/>
      <set attributeName="type" to="fractalNoise" 
        begin="a122201_t2.click"/>
      <set attributeName="numOctaves" to="1" 
        begin="a122201_n1.click"/>
      <set attributeName="numOctaves" to="2" 
        begin="a122201_n2.click"/>
      <set attributeName="baseFrequency" to="0.02" 
        begin="a122201_b1.click"/>
      <set attributeName="baseFrequency" to="0.03" 
        begin="a122201_b2.click"/>
      <set attributeName="seed" to="1" 
        begin="a122201_s1.click"/>
      <set attributeName="seed" to="2" 
        begin="a122201_s2.click"/>
    </feTurbulence>
  </filter>
</defs>
<rect x="0" y="0" width=300 height=300 style="filter: url(#a122201_f1)"/>
<text x=10 y=330 style="fill:#00f">type</text>
<text id="a122201_t1" x=110 y=330>turbulence</text>
<text id="a122201_t2" x=200 y=330>fractalNoise</text>
<text x=10 y=360 style="fill:#00f">numOctaves</text>
<text id="a122201_n1" x=110 y=360>　　1　　</text>
<text id="a122201_n2" x=200 y=360>　　2　　</text>
<text x=10 y=390 style="fill:#00f">baseFrequency</text>
<text id="a122201_b1" x=110 y=390>　　0.02　　</text>
<text id="a122201_b2" x=200 y=390>　　0.03　　</text>
<text x=10 y=420 style="fill:#00f">seed</text>
<text id="a122201_s1" x=110 y=420>　　1　　</text>
<text id="a122201_s2" x=200 y=420>　　2　　</text>
</svg>  
</div>

那麼這個看起來就是一張好像亂七八糟的圖，有什麼用處呢 ? 
既然是用來模擬大自然可見的一些有點亂的東西，例如雲，火焰等，這張圖就是一個基底，
有了基底就要拿來做點變化，這個時候得套用另一個強大的濾鏡 feDisplacementMap ，來製造有趣的影像
  
先來一個模擬雲朵的範例
  
```
$mmcode(r2)
```
<div class="mmresult r2">
<svg width="300" height="200"
     xmlns="http://www.w3.org/2000/svg" style="background-color:#5af">
<defs>
  <filter id="a122202_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="turbulence" baseFrequency="0.02"
        numOctaves="2" result="a122202_t1" seed="1"/>
    <feDisplacementMap in2="a122202_t1" in="SourceGraphic"
        scale="50" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
  <radialGradient id="a122202_rad1">
    <stop offset="0%" stop-color="#ffff"></stop>
    <stop offset="100%" stop-color="#fff0"></stop>
  </radialGradient>
</defs>
  <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#a122202_rad1)"
      style="filter: url(#a122202_f1)"/>
  <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#a122202_rad1)"
      style="filter: url(#a122202_f1)"/>
</svg>
  
</div>

2020年12月20日星期日

有趣的 SVG filter - feConvolveMatrix

以前用過不少秀圖程式，可以做很多濾鏡特效，當時並不曉得那些特效是怎麼算出來的，在 SVG 的濾鏡中有一個有趣的濾鏡 feConvolveMatrix 利用一個陣列，就可以做出很多種特效

參考資料：
[這裡](https://drafts.fxtf.org/filter-effects/#feConvolveMatrixElement) 
, [這裡](https://en.wikipedia.org/wiki/Kernel_(image_processing))
  
# 原理

<p>
`"color"_(x,y)=(陣列計算)/"divisor"+"bias"*"alpha"_(x,y)`
</p>

<p>  
以 3x3 為例，原來的值是 a,b,c,...,g,h,i 當使用陣列 `[[1,2,3],[4,5,6],[7,8,9]]` 去計算時，a 的值會等於
</p>

<font color="#f00">*注意，下圖 1~9 的排列和一開始的陣列相反</font>

而 b 的值會變成

# feConvolveMatrix 參數說明

```
order             設定陣列大小，建議用最小值 3 (預設)，不然很吃 cpu 資源
kernelMatrix      陣列設定
divisor           預設是陣列所有值加起來，也可以從這裡設定
bias              預設為 0
edgeMode          duplicate(預設),wrap,none
preserveAlpha     false(預設),true
targetX           目標像素的中心位置
targetY
kernelUnitLength  偏移

```

先來一個簡單範例

```
$mmcode(r1)
```

最後寫了一個自己設定矩陣參數的程式，做為這一篇的結束。

<div id="a122005_s5">
<style>
#a122005_set input
{
  width:3.5em;
  font-size:1em;
}
#a122005_s5 button
{
  font-size:1em;
}
#a122005_bb button
{
  width:3em;
}
#a122005_bb div
{
  display:inline-block;
  width:6em;
}
</style>
<svg width="300" height="230">
<defs>
<filter id="a122005_f5" >
  <feConvolveMatrix id="a122005_m5" in="SourceGraphic" color-interpolation-filters="sRGB" preserveAlpha="true" order="5" kernelMatrix=
   "0 0 0 0 0
    0 0 0 0 0 
    0 0 1 0 0 
    0 0 0 0 0 
    0 0 0 0 0"/>
</filter>
</defs>
<image href="https://yiharng.github.io/cat280.jpg" x=0 y=0 width=280 height=210 filter="url(#a122005_f5)"/>
</svg>
<br>
<div id="a122005_set" style="width:30em;">
<input type="text"/>
</div>
<br>
<div>
<button id="a122005_ini">init</button>
<button id="a122005_ini_blur">blur</button>
<button id="a122005_ini_sharpen">sharpen</button>
<button id="a122005_ini_edge">edge</button>
<button id="a122005_ini_emboss">emboss</button>
</div><br>
<div>
<div id="a122005_bb">
<div>c</div>
<button id="a122005_cadd">+</button>
<button id="a122005_csub">-</button><br>
<div>m</div>
<button id="a122005_madd">+</button>
<button id="a122005_msub">-</button><br>
<div>n</div>
<button id="a122005_nadd">+</button>
<button id="a122005_nsub">-</button><br>
</div>
</div>
</div>
  
<script>
$(()=>
{
  let ii='<input type="text"/>';
  let i;
  let hh="";
  let init    =[0   ,0   ,0   ,0   ,0,
                0   ,0   ,0   ,0   ,0,
                0   ,0   ,1   ,0   ,0,
                0   ,0   ,0   ,0   ,0,
                0   ,0   ,0   ,0   ,0   ];
  let blur    =[0   ,0   ,0   ,0   ,0,
                0   ,1   ,1   ,1   ,0,
                0   ,1   ,1   ,1   ,0,
                0   ,1   ,1   ,1   ,0,
                0   ,0   ,0   ,0   ,0   ];
  let sharpen =[0   ,0   ,0   ,0   ,0,
                0   ,0   ,-1  ,0   ,0,
                0   ,-1  ,5   ,-1  ,0,
                0   ,0   ,-1  ,0   ,0,
                0   ,0   ,0   ,0   ,0   ];
  let edge    =[0   ,0   ,0   ,0   ,0,
                0   ,-1  ,-1  ,-1  ,0,
                0   ,-1  ,8   ,-1  ,0,
                0   ,-1  ,-1  ,-1  ,0,
                0   ,0   ,0   ,0   ,0   ];
  let emboss  =[0   ,0   ,0   ,0   ,0,
                0   ,-2  ,-1  ,0   ,0,
                0   ,-1  ,1   ,1   ,0,
                0   ,0   ,1   ,2   ,0,
                0   ,0   ,0   ,0   ,0   ];
  for (i=0;i<25;i++)
  {
    hh+=ii;
    if((i+1)%5==0) hh+="<br>";
  }
  function putv(m)
  {
    let s=$("#a122005_set input");
    for (i=0;i<s.length;i++)
    {
      s[i].value=m[i].toFixed(0);
    }
  } 
  function getv()
  {
    let s=$("#a122005_set input");
    let r=[];
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      j=((j)?(j):(0));
      r.push(j);
    }
    return r;
  }
  function run()
  {
    let s=$("#a122005_set input");
    hh="";
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      hh+=((j)?(j):(0))+" ";
    }
    $("#a122005_m5").attr("kernelMatrix",hh);
  }
  $("#a122005_set").html(hh);
  putv(init);
  run();
  $("#a122005_set input").on("input",run);
  $("#a122005_ini").on("click",function()
  {
    putv(init);
    run();
  })
  $("#a122005_ini_blur").on("click",function()
  {
    putv(blur);
    run();
  })
  $("#a122005_ini_sharpen").on("click",function()
  {
    putv(sharpen);
    run();
  })
  $("#a122005_ini_edge").on("click",function()
  {
    putv(edge);
    run();
  })
  $("#a122005_ini_emboss").on("click",function()
  {
    putv(emboss);
    run();
  })
  $("#a122005_cadd").on("click",function()
  {
    let m=getv();
    m[12]+=1;
    putv(m);
    run();
  })
  $("#a122005_csub").on("click",function()
  {
    let m=getv();
    m[12]-=1;
    putv(m);
    run();
  })
  $("#a122005_madd").on("click",function()
  {
    let m=getv();
    let n=[7,11,13,17];
    for (i in n)
    {
      m[n[i]]+=1;
    }
    putv(m);
    run();
  })
  $("#a122005_msub").on("click",function()
  {
    let m=getv();
    let n=[7,11,13,17];
    for (i in n)
    {
      m[n[i]]-=1;
    }
    putv(m);
    run();
  })
  $("#a122005_nadd").on("click",function()
  {
    let m=getv();
    let n=[6,8,16,18];
    for (i in n)
    {
      m[n[i]]+=1;
    }
    putv(m);
    run();
  })
  $("#a122005_nsub").on("click",function()
  {
    let m=getv();
    let n=[6,8,16,18];
    for (i in n)
    {
      m[n[i]]-=1;
    }
    putv(m);
    run();
  })
  MathJax.typeset();
});
</script>

2020年12月17日星期四

有趣的 SVG filter - feColorMatrix

之前寫了一篇 CSS 的濾鏡 [CSS 的 filter](https://yhtpnotes.blogspot.com/2020/06/css-filter.html) ，裡頭有一些設定，例如飽合度(saturate) 和色相旋轉(hue-rotate) 等，在 SVG 的濾鏡中也可以做到，而且還有一個更強大的 Matrix 轉換
  
參考資料：[這裡](https://drafts.fxtf.org/filter-effects/#feColorMatrixElement) 還有 [這裡](https://webplatform.github.io/docs/svg/elements/feColorMatrix/)
  
首先先說明一下 feColorMatrix 的參數
  
```
  type     matrix , saturate , hueRotate , luminanceToAlpha
  values   設定的值  
```

# matrix  
先從最複雜的 matrix 說明
  
<p>
matrix 的定義如下，從 `a_00` 到 `a_34` 就是 values 要填的值
</p>  
  
<div style="transform: scale(0.8) translate(-40px,0);">
<p>
`[[R_(out)],[G_(out)],[B_(out)],[A_(out)],[1]] = 
[[a_00,a_01,a_02,a_03,a_04]
,[a_10,a_11,a_12,a_13,a_14]
,[a_20,a_21,a_22,a_23,a_24]
,[a_30,a_31,a_32,a_33,a_34]
,[0   ,0   ,0   ,0   ,1   ]] * 
[[R],[G],[B],[A],[1]]`
</p>
</div>
  
先來一個簡單的範例, 這個範例中把 R,G,B 的值都乘以2，可以增加亮度

```
$mmcode(r1)  
```  
<div class="mmresult r1">  
<svg width="300" height="400">
<defs>
<filter id="a121721_f1">
  <feColorMatrix in="SourceGraphic" type="matrix" values=
   "2 0 0 0 0
    0 2 0 0 0 
    0 0 2 0 0
    0 0 0 1 0"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f1)"/>
</svg>
</div>
  
經由這個矩陣，把 r,g,b 都乘以2，即可增加亮度

# saturate

要增加飽合度的話，只要 type 設為 saturate , 然後修改 values 即可, 如果想手動設定陣列來達到效果，公式如下：

```
$mmcode(r2)
```
<div class="mmresult r2">
<svg width="300" height="400">
<defs>
<filter id="a121721_f2">
  <feColorMatrix in="SourceGraphic" type="saturate" values="2"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f2)"/>
</svg>
</div>
  
# hueRotate

hueRotate 公式

```
$mmcode(r3)
```
<div class="mmresult r3">
<svg width="300" height="400">
<defs>
<filter id="a121721_f3">
  <feColorMatrix in="SourceGraphic" type="hueRotate" values="180"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f3)"/>
</svg>
</div>
  
# luminanceToAlpha

luminanceToAlpha 公式
  
<p>
`[[0     ,0     ,0     ,0   ,0   ]
, [0     ,0     ,0     ,0   ,0   ]
, [0     ,0     ,0     ,0   ,0   ]
, [0.2126,0.7152,0.0722,0   ,0   ]
, [0     ,0     ,0     ,0   ,1   ]]`
</p>

```
$mmcode(r4)
```
<div class="mmresult r4">
<svg width="300" height="400">
<defs>
<filter id="a121721_f4">
  <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"/>
</filter>
</defs>
<text x=80 y=20>原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=200 height=200/>
<text x=80 y=220>濾鏡</text>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=200 width=200 height=200 filter="url(#a121721_f4)"/>
</svg>
</div>
  
<hr>
  
最後寫了一個自己設定矩陣參數的程式，做為這一篇的結束。

<div id="a121721_s5">
<style>
#a121721_set input
{
  width:3.5em;
}
#a121721_s5 button
{
  font-size:1em;
}
#a121721_bb button
{
  width:3em;
}
#a121721_bb div
{
  display:inline-block;
  width:6em;
}
</style>
<svg width="260" height="200">
<defs>
<filter id="a121721_f5">
  <feColorMatrix id="a121721_m5" in="SourceGraphic" type="matrix" values=
   "2 0 0 0 0
    0 2 0 0 0 
    0 0 2 0 0
    0 0 0 1 0"/>
</filter>
</defs>
<image href="https://yiharng.github.io/bird.jpg" x=0 y=0 width=260 height=200 filter="url(#a121721_f5)"/>
</svg>
<br>
<div id="a121721_set" style="width:30em;">
<input type="text"/>
</div>
<br>
<div>
<button id="a121721_ini">init</button>
<button id="a121721_ini_contrast">contrast</button>
<button id="a121721_ini_grey">grey</button>
<button id="a121721_ini_sepia">sepia</button>
<button id="a121721_ini_invert">invert</button>
</div><br>
<div>
<div id="a121721_bb">
<div>brightness</div>
<button id="a121721_badd">+</button>
<button id="a121721_bsub">-</button><br>
<div>m</div>
<button id="a121721_madd">+</button>
<button id="a121721_msub">-</button><br>
<div>n</div>
<button id="a121721_nadd">+</button>
<button id="a121721_nsub">-</button><br>
</div>
</div>
</div>
  
<script>
$(()=>
{
  let ii='<input type="text"/>';
  let i;
  let hh="";
  let init=[1,0,0,0,0,
            0,1,0,0,0,
            0,0,1,0,0,
            0,0,0,1,0];
  let contrast=[2.0 ,0   ,0   ,0   ,-0.2,
                0   ,2.0 ,0   ,0   ,-0.2,
                0   ,0   ,2.0 ,0   ,-0.2,
                0   ,0   ,0   ,1   ,0   ];
  let grey    =[.33 ,.33 ,.33 ,0   ,0,
                .33 ,.33 ,.33 ,0   ,0,
                .33 ,.33 ,.33 ,0   ,0,
                0   ,0   ,0   ,1   ,0   ];
  let sepia   =[.35 ,.35 ,.35 ,0   ,0,
                .25 ,.25 ,.25 ,0   ,0,
                .15 ,.15 ,.15 ,0   ,0,
                0   ,0   ,0   ,1   ,0   ];
  let invert  =[-1  ,0   ,0   ,0   ,.5,
                0   ,-1  ,0   ,0   ,.5,
                0   ,0   ,-1  ,0   ,.5,
                0   ,0   ,0   ,1   ,0   ];
  for (i=0;i<20;i++)
  {
    hh+=ii;
    if((i+1)%5==0) hh+="<br>";
  }
  function putv(m)
  {
    let s=$("#a121721_set input");
    for (i=0;i<s.length;i++)
    {
      s[i].value=m[i].toFixed(3);
    }
  }
  function getv()
  {
    let s=$("#a121721_set input");
    let r=[];
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      j=((j)?(j):(0));
      r.push(j);
    }
    return r;
  }
  function run()
  {
    let s=$("#a121721_set input");
    hh="";
    for (i=0;i<s.length;i++)
    {
      let j=parseFloat(s[i].value);
      hh+=((j)?(j):(0))+" ";
    }
    $("#a121721_m5").attr("values",hh);
  }
  $("#a121721_set").html(hh);
  putv(init);
  run();
  $("#a121721_set input").on("input",run);
  $("#a121721_ini").on("click",function()
  {
    putv(init);
    run();
  })
  $("#a121721_ini_contrast").on("click",function()
  {
    putv(contrast);
    run();
  })
  $("#a121721_ini_grey").on("click",function()
  {
    putv(grey);
    run();
  })
  $("#a121721_ini_sepia").on("click",function()
  {
    putv(sepia);
    run();
  })
  $("#a121721_ini_invert").on("click",function()
  {
    putv(invert);
    run();
  })
  $("#a121721_badd").on("click",function()
  {
    let m=getv();
    m[0]+=0.2;
    m[6]+=0.2;
    m[12]+=0.2;
    putv(m);
    run();
  })
  $("#a121721_bsub").on("click",function()
  {
    let m=getv();
    m[0]-=0.2;
    m[6]-=0.2;
    m[12]-=0.2;
    putv(m);
    run();
  })
  $("#a121721_madd").on("click",function()
  {
    let m=getv();
    m[4]+=0.1;
    m[9]+=0.1;
    m[14]+=0.1;
    putv(m);
    run();
  })
  $("#a121721_msub").on("click",function()
  {
    let m=getv();
    m[4]-=0.1;
    m[9]-=0.1;
    m[14]-=0.1;
    putv(m);
    run();
  })
  $("#a121721_nadd").on("click",function()
  {
    let m=getv();
    let n=[1,2,5,7,10,11];
    for (i in n)
    {
      m[n[i]]+=0.1;
    }
    putv(m);
    run();
  })
  $("#a121721_nsub").on("click",function()
  {
    let m=getv();
    let n=[1,2,5,7,10,11];
    for (i in n)
    {
      m[n[i]]-=0.1;
    }
    putv(m);
    run();
  })
  MathJax.typeset();
});
</script>

產生漂亮的數學運算式 - MathJax

之前寫了一個 [符號選擇的 app](https://yhtpnotes.blogspot.com/2020/09/app.html) 可以產生 <span style="color:#00f;font-size:1.3em">𝐗₂＋𝐘⁽⁴⁺⁵ⁿ⁾ </span>這樣的數學式，如果遇到更複雜的有沒有辦法呢？
  
這個時候就要利用其它更強大的工具來做了，其中我覺得最好用的是 MathJax ，以及 AsciiMath 的語法
  
[MathJax 官網](https://www.mathjax.org/)

[LaTeX 語法說明](https://oysz2016.github.io/post/8611e6fb.html)
  
[AsciiMath 官網](http://asciimath.org/)
  
先來一個範例
  
```
$mmcode(r1)
```
  
<div class="mmresult r1">
<script>
MathJax = {
  loader: {load: ['input/asciimath', 'output/chtml']}
}//設定輸出為 chtml , 也可以設為 output/svg 來輸出 svg 圖檔
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js">
</script>

<p>
剛才的運算式 <font color="#00f">`X_2+Y^((4+5n))`</font> 原始字串：<font color="#00f">X_2+Y^((4+5n))</font>
</p>

來個複雜一點的, 原始字串：<font color="#00f">Ans=((-b)+-sqrt(b^2-4ac))/(2a)</font> 
顯示如下 :
<p>
`Ans=((-b)+-sqrt(b^2-4ac))/(2a)`
</p>  
</div>

如果要顯示 MathJax 的選單，可以用這個設定
  
```
<script>
MathJax = {
  loader: {load: ['input/asciimath', 'output/chtml', 'ui/menu']},
};
</script>
  
```

如果要手動重新繪製數學式，可以呼叫這個指令
  
```
    MathJax.typeset();
```

有趣的 SVG filter - feComponentTransfer

SVG 的 feComponentTransfer 濾鏡相當有用，可以用來調整顏色和亮度，一開始在測試時覺得很奇怪，好像和預想的不同，查了查資料才發現這個濾鏡預設的是 LinearRGB ，必須加上 **color-interpolation-filters="sRGB"** 才會變成習慣的 sRGB 。

# 濾鏡功能

參考資料：[這裡](https://drafts.fxtf.org/filter-effects/#feComponentTransferElement) 還有 [這裡](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer)

使用方式：在裡面包著 feFuncR,feFuncG,feFuncB,feFuncA 可以單獨針對每一個通道做設定，type 分類有 identity , table , discrete , linear , gamma 這幾種

```
      <feComponentTransfer>
        <feFuncR type="功能函式"></feFuncR>
        <feFuncG type="功能函式"></feFuncG>
        <feFuncB type="功能函式"></feFuncB>
        <feFuncA type="功能函式"></feFuncA>
      </feComponentTransfer>

```

## identity

out=in  表示原功能不變

```
  <feFuncR type="identity"></feFuncR>

```
## table

這裡使用一個參數 tableValues 從 0 到 1 設定每一個區間的值，中間會根據設定的值做漸層
```
  <feFuncR type="table" 
     tableValues="0 1 0 1"></feFuncR>

```

## discrete

一樣有個 tableValues ，而中間的值不會做漸層，而會直接跳到最近的設定
```
  <feFuncR type="discrete" 
     tableValues="0 1 0 1"></feFuncR>

```

## linear

out = slope * in + intercept

用一個線性斜率來計算顏色分布

```
  <feFuncR type="linear" 
    slope="1" intercept="0"></feFuncR>

```

## gamma

out = amplitude * pow(in, exponent) + offset

```
  <feFuncR type="gamma" 
    amplitude="1" exponent="0.455" offset="0"></feFuncR>

```

範例：
  
```
$mmcode(r1)
```

<div class="mmresult r1">
identity<br>
<svg width=300 height=20>
  <defs>
    <linearGradient id="a121701_d1" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0" stop-color="#000"></stop>
      <stop offset="100%" stop-color="#fff"></stop>
    </linearGradient>
    <filter id="a121701_identity" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"></feFuncR>
        <feFuncG type="identity"></feFuncG>
        <feFuncB type="identity"></feFuncB>
        <feFuncA type="identity"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_identity)"/>
</svg><br>
table LinearRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_table" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" 
           tableValues="0 1 0 1"></feFuncR>
        <feFuncG type="table" 
           tableValues="0 0 0 0"></feFuncG>
        <feFuncB type="table" 
           tableValues="0 0 0 0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_table)"/>
</svg><br>
table sRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_table1" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer color-interpolation-filters="sRGB">
        <feFuncR type="table" 
           tableValues="0 1 0 1"></feFuncR>
        <feFuncG type="table" 
           tableValues="0 0 0 0"></feFuncG>
        <feFuncB type="table" 
           tableValues="0 0 0 0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_table1)"/>
</svg><br>
discrete LinearRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_discrete" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="discrete" 
           tableValues="0 1 0 1"></feFuncR>
        <feFuncG type="discrete" 
           tableValues="0 0 0 0"></feFuncG>
        <feFuncB type="discrete" 
           tableValues="0 0 0 0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_discrete)"/>
</svg><br>
discrete sRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_discrete1" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer color-interpolation-filters="sRGB">
        <feFuncR type="discrete" 
           tableValues="0 1 0 1"></feFuncR>
        <feFuncG type="discrete" 
           tableValues="0 0 0 0"></feFuncG>
        <feFuncB type="discrete" 
           tableValues="0 0 0 0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_discrete1)"/>
</svg><br>
linear LinearRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_linear" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" 
          slope="1" intercept="0"></feFuncR>
        <feFuncG type="linear" 
          slope="-1" intercept="1"></feFuncG>
        <feFuncB type="linear" 
          slope="0" intercept="0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_linear)"/>
</svg><br>
linear sRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_linear1" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer color-interpolation-filters="sRGB">
        <feFuncR type="linear" 
          slope="1" intercept="0"></feFuncR>
        <feFuncG type="linear" 
          slope="-1" intercept="1"></feFuncG>
        <feFuncB type="linear" 
          slope="0" intercept="0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_linear1)"/>
</svg><br>
gamma LinearRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_gamma" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" 
          amplitude="1" exponent="0.455" offset="0"></feFuncR>
        <feFuncG type="gamma" 
          amplitude="1" exponent="0.455" offset="0"></feFuncG>
        <feFuncB type="gamma" 
          amplitude="1" exponent="0.455" offset="0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_gamma)"/>
</svg><br>
gamma sRGB<br>
<svg width=300 height=20>
  <defs>
    <filter id="a121701_gamma1" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer color-interpolation-filters="sRGB">
        <feFuncR type="gamma" 
          amplitude="1" exponent="0.455" offset="0"></feFuncR>
        <feFuncG type="gamma" 
          amplitude="1" exponent="0.455" offset="0"></feFuncG>
        <feFuncB type="gamma" 
          amplitude="1" exponent="0.455" offset="0"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect width="100%" height="20" fill="url(#a121701_d1)" filter="url(#a121701_gamma1)"/>
</svg><br>
</div>

2020年12月16日星期三

關於 gamma 2.2 和 LinearRGB

有在拍照和修圖的人一定用過 gamma 設定，可以讓暗部變亮，亮部又不會過曝，
根據 [wiki 說明](https://zh.wikipedia.org/wiki/%E4%BC%BD%E7%91%AA%E6%A0%A1%E6%AD%A3)

<div style="background-color:#eee;padding:10px">
為圖像進行伽馬編碼的目的是用來對人類視覺的特性進行補償，從而根據人類對光線或者黑白的感知，最大化地利用表示黑白的數據位或帶寬
</div>
  
有沒有覺得和 LinearRGB 很像呢 ?
  
gamma 的計算公式如下

```
out=pow(in,gamma)
```

把 0~255 的顏色對應畫出來，如下圖：
  
藍色的 gamma 1/2.2 幾乎和 LinearRGB 完全一樣

關於 LinearRGB 和 sRGB

在測試 SVG 的顏色時遇到一些奇怪的問題，和預期的結果很不一樣，查了查資料才曉得，原來遇到了 LinearRGB 和 sRGB 的問題，一直以來只知道程式在用的都是 sRGB 但是對於這些色彩定義其實沒有很深的概念
  
關於 linearRGB 和 sRGB  的設定方式，預設就是 linearRGB ，所以只要在使用到sRGB的濾鏡加上 ``` color-interpolation-filters="sRGB" ```

範例如下
  
```
  <svg color-interpolation-filters="sRGB">
  <feDisplacementMap color-interpolation-filters="sRGB"> 
    
```  
  
參考資料：[這裡](https://home.gamer.com.tw/creationDetail.php?sn=3777257)
  
肉眼看顏色，其實不是線性的，rgb(255,255,255) 是最亮，中間值 rgb(128,128,128) 肉眼看起來的亮度其實偏暗, LinearRGB 其實就是以真實亮度來調整 rgb 的值
  
轉換公式如下 :

sRGB 轉換為 LinearRGB

```
Cs<=0.04045 → Cl = Cs/12.92
Cs>0.04045 → Cl = pow((Cs+0.055)/1.055, 2.4)
```
  
LinearRGB 轉換為 sRGB
  
```
Cl<=0.0031308 → Cs = 12.92 * Cl
Cl>0.0031308 → Cs = 1.055 * pow(Cl,0.41666) - 0.055
```

當亮度為一半亮度(0.5)時，Cs=0.735360635285651 , RGB 的值取整數等於 188 , 也就是 rgb(188,188,188) 其實才是一半亮度

sRGB

LinearRGB

有沒有覺得 LinearRGB 的中間亮度比較真實呢 ?

2020年12月13日星期日

有趣的 SVG filter - feMorphology

SVG 的濾鏡中，Morphology 算是比較特別的，可以把線條變粗或變細, 套用在字型上可以做出很有意思的效果  
  
```
$mmcode(r1)  
```
<div class="mmresult r1">  
<svg width="250" height="250" viewBox="0 0 160 160" style="background-color:#ffa">
<defs>
<filter id="a121311_f1">
  <feMorphology in="SourceGraphic" operator="erode" radius="0">
    <set attributeName="operator" to="erode" begin="a121311_erode.click"/>
    <set attributeName="operator" to="dilate" begin="a121311_dilate.click"/>
    <set attributeName="radius" to="0" begin="a121311_r0.click"/>
    <set attributeName="radius" to="1" begin="a121311_r1.click"/>
    <set attributeName="radius" to="2" begin="a121311_r2.click"/>
    <set attributeName="radius" to="3" begin="a121311_r3.click"/>
  </feMorphology>
</filter>
</defs>
<text id="a121311_erode"  x=10 y=20>erode</text>
<text id="a121311_dilate" x=90 y=20>dilate</text>
<text x=50 y=110>radius</text>
<g style="font-size:1.4em">
<text id="a121311_r0" x=10  y=140>0</text>
<text id="a121311_r1" x=50  y=140>1</text>
<text id="a121311_r2" x=90  y=140>2</text>
<text id="a121311_r3" x=130 y=140>3</text>
</g>
<text x=10 y=80 style="font-size:3.4em" fill="#ff0" stroke="#f00" stroke-width="3" filter="url(#a121311_f1)" >
TEST
</text>
</svg>  
</div>

如果套用在圖形上結果如下  
  
```
$mmcode(r2)
```  
<div class="mmresult r2">  
<svg width="300" height="300" viewBox="0 0 200 200" style="background-color:#ffa">
<defs>
<filter id="a121312_f1">
  <feMorphology in="SourceGraphic" operator="dilate" radius="0">
    <set attributeName="operator" to="erode" begin="a121312_erode.click"/>
    <set attributeName="operator" to="dilate" begin="a121312_dilate.click"/>
    <set attributeName="radius" to="0" begin="a121312_r0.click"/>
    <set attributeName="radius" to="1" begin="a121312_r1.click"/>
    <set attributeName="radius" to="2" begin="a121312_r2.click"/>
    <set attributeName="radius" to="3" begin="a121312_r3.click"/>
  </feMorphology>
</filter>
</defs>
<text id="a121312_erode"  x=10 y=20>erode</text>
<text id="a121312_dilate" x=90 y=20>dilate</text>
<g transform="translate(0,45)">
<text x=50 y=110>radius</text>
<g style="font-size:24">
<text id="a121312_r0" x=10  y=140>0</text>
<text id="a121312_r1" x=50  y=140>1</text>
<text id="a121312_r2" x=90  y=140>2</text>
<text id="a121312_r3" x=130 y=140>3</text>
</g>
</g>
<image id="a121312_bird" href="https://yiharng.github.io/bird.jpg" x=155 y=30 width=30 height=30/>
<image id="a121312_bomb" href="https://yiharng.github.io/bomb.png" x=155 y=80 width=30 height=30/>
<image href="https://yiharng.github.io/bird.jpg" x=10 y=30 height=105 width=138 filter="url(#a121312_f1)">
  <set attributeName="href" to="https://yiharng.github.io/bird.jpg" begin="a121312_bird.click"/>
  <set attributeName="href" to="https://yiharng.github.io/bomb.png" begin="a121312_bomb.click"/>
</image>
</svg>  
</div>
  
<font color="#00f" style="font-size:1.3em">*實測結果，chrome 及 firefox 正常, safari 及 iphone 上的結果和其它瀏覽器有點不同, 而且在利用 set 做參數切換時反應有點遲頓</font>

有趣的 SVG filter - feComposite

從一開始接觸濾鏡，我就在想，這些濾鏡都是對整個距形空間做處理，如果我只想針對物件範圍處理，難道只能再套用 mask 做裁切嗎 ? 其實有一個比 feBlend 和 feMerge 更強大的疊圖功能 feComposite
  
feComposite 的參數如下：[參考資料](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite)
  
```
  in,in2        兩張圖
  operator      疊圖參數 
                over (預設)
                in
                out
                atop
                xor
                lighter
                arithmetic
  k1,k2,k3,k4   result = k1*in*in2 + k2*in + k3*in2 + k4
  
```

範例如下 :
  
<font color="#00f" style="font-size:1.3em">*實測結果 firefox 似忽不支援 lighter**</font>
  
```
$mmcode(r1)
```
  
<div class="mmresult r1">
<svg width=300 height=360 style="background-color:#ffa">
<defs>
  <filter id="a121301_f1">
    <feImage id="a121301_in1" xlink:href="https://yiharng.github.io/bird.jpg" width=240 height=220 preserveAspectRatio="none" result="a121301_img1" />
    <feComposite in="SourceGraphic" in2="a121301_img1" k1=1 k2=0 k3=0  k4=0 operator="over">
      <set attributeName="in"  to="SourceGraphic" begin="a121301_ins.click"/>
      <set attributeName="in2" to="a121301_img1"  begin="a121301_ins.click"/>
      <set attributeName="in"  to="a121301_img1"  begin="a121301_inp.click"/>
      <set attributeName="in2" to="SourceGraphic" begin="a121301_inp.click"/>
      <set attributeName="operator" to="over" begin="a121301_over.click"/>
      <set attributeName="operator" to="in"   begin="a121301_in.click"/>
      <set attributeName="operator" to="out"  begin="a121301_out.click"/>
      <set attributeName="operator" to="atop" begin="a121301_atop.click"/>
      <set attributeName="operator" to="xor"  begin="a121301_xor.click"/>
      <set attributeName="operator" to="lighter" begin="a121301_lighter.click"/>
      <set attributeName="operator" to="arithmetic" begin="a121301_arithmetic.click"/>
    </feComposite>
  </filter>
</defs>
  <text x=115 y=270 fill="#00f">operator</text>
  <text id="a121301_ins"  x=20  y=20>in=Source</text>
  <text id="a121301_inp"  x=140 y=20>in=Image</text>
  <g transform="translate(40,10)">
  <text id="a121301_over" x=10  y=290>over</text>
  <text id="a121301_in"   x=60  y=290>in</text>
  <text id="a121301_out"  x=110 y=290>out</text>
  <text id="a121301_atop" x=160 y=290>atop</text>
  <text id="a121301_xor"  x=10  y=320>xor</text>
  <text id="a121301_lighter" x=60 y=320>lighter</text>
  <text id="a121301_arithmetic" x=130 y=320>arithmetic</text>
  </g>
  <path id="a121301_p1" d="M50,100 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 c0,60,-50,100,-100,130 c-50,-30,-100,-80,-100,-130Z" fill="#0aa" filter="url(#a121301_f1)"></path>
</svg>
</div>
  
熟悉這些變化後，就可以組合各種濾鏡玩效果
  
```
$mmcode(r2)
```
<div class="mmresult r2">
<svg width=300 height=300 style="background-color:#ffa">
<defs>
  <filter id="a121302_f1">
    <feImage id="a121302_in1" xlink:href="https://yiharng.github.io/bird.jpg" width=240 height=220 preserveAspectRatio="none" result="a121302_img1" />
    <feFlood width="40%" height="100%" flood-color="#fff" result="a121302_fo"/>
    <feComposite in="SourceGraphic" operator="arithmetic" k1=0 k2=-1 k3=0 k4=1 result="a121302_sss"/>
    <feComposite in2="a121302_sss" in="a121302_fo" result="a121302_sss1" operator="xor"/>
    <feComposite in="a121302_sss1" in2="a121302_img1" k1=1 k2=0 k3=0  k4=0 operator="arithmetic">
    </feComposite>
  </filter>
</defs>
  <path id="a121302_p1" d="M50,100 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 c0,60,-50,100,-100,130 c-50,-30,-100,-80,-100,-130Z" fill="#0aa" filter="url(#a121302_f1)"></path>
</svg>
  
</div>

2020年12月12日星期六

有趣的 SVG filter - 打光

光源濾鏡專門用來打光，參數如下

```
in                輸入
surfaceScale      表面渲染放大率
diffuseConstant   擴散光量 (feDiffuseLighting 才有)
specularExponent  渲染強度 (feSpecularLighting 才有)

可以用的光源

fePointLight      點光源, 參數有 x,y,z
feDistantLight    遠光, 參數有 azimuth (方位角), elevation(海拔)
feSpotLight       聚光燈, 參數有 
                  x,y,z 
                  pointsAtX,pointsAtY,pointsAtZ
                  specularExponent (渲染強度)
                  limitingConeAngle (擴散角度)

```
  
# feDiffuseLighting  
  
```
$mmcode(r1)
```
<div class="mmresult r1">
<div style="display:inline-block">
fePointLight<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="a121201_L1">
    <feDiffuseLighting lighting-color="#fff">
      <fePointLight x="130" y="60" z="30"/>
    </feDiffuseLighting>
  </filter>
  <circle cx=100 cy=100 r=80 fill="#0af" filter="url(#a121201_L1)"/>
</svg>
</div>
<div style="display:inline-block">
feDistantLight<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="a121201_L2">
    <feDiffuseLighting lighting-color="#fff">
      <feDistantLight azimuth="45" elevation="30"/>
    </feDiffuseLighting>
  </filter>
  <circle cx=100 cy=100 r=80 fill="#0af" filter="url(#a121201_L2)"/>
</svg>
</div>
<div style="display:inline-block">
feSpotLight<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="a121201_L3">
    <feDiffuseLighting lighting-color="#fff">
      <feSpotLight x="0" y="0" z="100" pointsAtX="200" pointsAtY="200" pointsAtZ="0" limitingConeAngle="30"/>
    </feDiffuseLighting>
  </filter>
  <circle cx=100 cy=100 r=80 fill="#0af" filter="url(#a121201_L3)"/>
</svg>
</div>
<br>
光源加上兩個 circle 用不同的 alpha 值時，似忽有上下層打光的感覺
<svg width=200 height=200>
<g filter="url(#a121201_L1)">
<circle cx=100 cy=100 r=80 fill="#fff8"/>
<circle cx=50 cy=50 r=25 fill="#ffff" stroke-width="20" stroke="#000a"/>
</g>
</svg>
</div>  
  
# feSpecularLighting
  
feSpecularLighting 和 feDiffuseLighting 有點不同，feSpecularLighting 會創造出一個有 Alpha 的圖層，然後可以在原圖再疊上這個有 Alpha 的圖後，就成了打光後的圖
  
在這個範例中，我設定了 specularExponent="5" 加強渲染強度，以及加上背景設定，可以更清楚的看到打光圖層實際的作用範圍
  
```
$mmcode(r2)
```
<div class="mmresult r2">
<style>
#a121202_bk:checked ~ div
{
  background-color:#88f
}
</style>
<input id="a121202_bk" type="checkbox"/>
<label for="a121202_bk">背景</label>
<br>
<svg width=200 height=25>
<text id="a121202_ww" x=0 y=22>白光</text>
<text id="a121202_yy" x=50 y=22>黃光</text>
</svg>
<br><br>
<div style="display:inline-block">
fePointLight<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="a121202_L1">
    <feSpecularLighting lighting-color="#fff" specularExponent="5">
      <set attributeName="lighting-color" to="#ff0" begin="a121202_yy.click"/>
      <set attributeName="lighting-color" to="#fff" begin="a121202_ww.click"/>
      <fePointLight x="130" y="60" z="30"/>
    </feSpecularLighting>
  </filter>
  <circle cx=100 cy=100 r=80 fill="#000"/>
  <circle cx=100 cy=100 r=80 fill="#0af" filter="url(#a121202_L1)"/>
</svg>
</div>
<div style="display:inline-block">
feDistantLight<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="a121202_L2">
    <feSpecularLighting lighting-color="#fff" specularExponent="5">
      <set attributeName="lighting-color" to="#ff0" begin="a121202_yy.click"/>
      <set attributeName="lighting-color" to="#fff" begin="a121202_ww.click"/>
      <feDistantLight azimuth="45" elevation="30"/>
    </feSpecularLighting>
  </filter>
  <circle cx=100 cy=100 r=80 fill="#000"/>
  <circle cx=100 cy=100 r=80 fill="#0af" filter="url(#a121202_L2)"/>
</svg>
</div>
<div style="display:inline-block">
feSpotLight<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="a121202_L3">
    <feSpecularLighting lighting-color="#fff" specularExponent="5">
      <set attributeName="lighting-color" to="#ff0" begin="a121202_yy.click"/>
      <set attributeName="lighting-color" to="#fff" begin="a121202_ww.click"/>
      <feSpotLight x="0" y="0" z="100" pointsAtX="200" pointsAtY="200" pointsAtZ="0" limitingConeAngle="30"/>
    </feSpecularLighting>
  </filter>
  <circle cx=100 cy=100 r=80 fill="#000"/>
  <circle cx=100 cy=100 r=80 fill="#0af" filter="url(#a121202_L3)"/>
</svg>
</div>
<br>
光源加上兩個 circle 用不同的 alpha 值時，似忽有上下層打光的感覺
<div style="display:inline-block">
<svg width=200 height=200>
<circle cx=100 cy=100 r=80 fill="#000"/>
<g filter="url(#a121202_L1)">
<circle cx=100 cy=100 r=80 fill="#fff8"/>
<circle cx=50 cy=50 r=25 fill="#ffff" stroke-width="20" stroke="#000a"/>
</g>
</svg>
</div>
</div>

實測結果 firefox 的 feDiffuseLighting 打光結果和 chrome 及 safari 都不同，偏暗，對比較強，而 feSpecularLighting 的結果，三個瀏覽器都很接近，

2020年12月11日星期五

SVG filter 令人困擾的 feImage

filter 中的 feImage 有個有趣的用法，可以把任何一個 SVG 中的物件當作圖檔處理，範例如下
  
```
$mmcode(r1)  
```  
  
<div class="mmresult r1">
第一張圖，feImage 接了一張外部的 jpg 圖檔，原來的圓形套用後，可以正常顯示疊合的效果<br>
<svg width=300 height=300 style="background-color:#ffa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <filter id="a121101_f1">
    <feImage xlink:href="https://yiharng.github.io/bird.jpg" x=30 y=30 width=240 height=240 preserveAspectRatio="none"  result="a121101_img1"/>
    <feBlend in2="a121101_img1" in="SourceGraphic"/>
  </filter>
</defs>
<circle id="c1" cx=150 cy=150 r=100 filter="url(#a121101_f1)" fill="#0ff5"/>
</svg><br>
<br>
第二張圖, feImage 接了 defs 中定義的 path 三角形，在 chrome 和 safari 有秀出來，但是 feImage 設定的 width 及 height 沒有變形作用，而 firefox 無法顯示，<br>
<svg width=300 height=300 style="background-color:#ffa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <filter id="a121101_f2">
    <feImage xlink:href="#a121101_p2" x=30 y=30 width=240 height=240 preserveAspectRatio="none"  result="a121101_img2" />
    <feBlend in2="a121101_img2" in="SourceGraphic"/>
  </filter>
  <path id="a121101_p2" d="M0,150 L120,0 L240,150z" fill="#fa0"/>
</defs>
<circle id="a121101_c2" cx=150 cy=150 r=100 filter="url(#a121101_f2)" fill="#0ff5"/>
</svg>
</div>

那麼如果要以現成的圖放到 filter 使用有沒有什麼方法呢 ? 也許是我才疏學淺，找了很久似忽沒有現成的方法可以解決 firefox 的問題，也沒有其它引入圖形處理的方法，最後只有想到一個有點暴力的方式，利用之前用過的 [inline SVG](https://yhtpnotes.blogspot.com/2020/11/inline-svg.html) 來解決
  
由下面範例可以發現，本來的 240x150 的圖，在之前範例中並沒有被縮放成 240x240 , 而使用 data:image 的方式會被視為外部的圖檔，正常縮放為 240x240
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">

2020年12月10日星期四

有趣的 SVG filter

SVG 有個強大的 filter , 可以做到很多有趣的特效，先從最基本的開始

# filter
  
```
x,y,width,height   濾鏡位置和大小，如果沒有設定，預設為使用該濾鏡的物件往外擴 10%
  
filterUnits        userSpaceOnUse 範圍為整個 SVG 
                   objectBoundingBox 範圍只在物件區域 (預設)
primitiveUnits     userSpaceOnUse  (預設)
                   objectBoundingBox 
  
```
  
# feImage , feTile 和 feBlend
  
feImage 很單純的就是用一張圖當作過濾器，於是不管本來的圖長什麼樣子，都會變成那張圖，加上 feTile 後，有點像材質貼圖, 會佔滿本來圖形的 box 範圍
  
而 feBlend 是混合兩張圖, 可以指定 in 和 in2 以及 mode
  
```
in , in2     輸入的圖 
             SourceGraphic    用來過濾的原始圖
             SourceAlpha      原始圖的 alpha 
             BackgroundImage
             BackgroundAlpha
             FillPaint
             StrokePaint
             [filter-primitive-reference]
  
mode         multiply        兩張圖用 and 運算
             color-dodge     一種混色運算
             沒有值           直接疊圖
  
所有 filter 都可以用的參數
  
result       濾鏡後的結果
x,y          濾鏡影響座標
width,height 濾鏡影響範圍
```
  
```
$mmcode(r1)
```
<div class="mmresult r1">
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="a121011_fimg" x="0" y="0" width="100%" height="100%" >
      <feImage xlink:href="https://yiharng.github.io/bird.jpg" width="100" height="100" preserveAspectRatio="none" />
    </filter>
    <filter id="a121011_ftile" x="0" y="0" width="100%" height="100%" >
      <feImage xlink:href="https://yiharng.github.io/bird.jpg" width="100" height="100" preserveAspectRatio="none" />
      <feTile/>
    </filter>
    <filter id="a121011_fblend" x="0" y="0" width="100%" height="100%" >
      <feImage xlink:href="https://yiharng.github.io/bird.jpg" width="100" height="100" preserveAspectRatio="none" />
      <feTile/>
      <feBlend in2="SourceGraphic" mode="multiply"/>
    </filter>
    <filter id="a121011_fblend1" x="0" y="0" width="100%" height="100%" >
      <feImage xlink:href="https://yiharng.github.io/bird.jpg" width="100" height="100" preserveAspectRatio="none" />
      <feTile/>
      <feBlend in2="SourceGraphic" mode="color-dodge"/>
    </filter>
    <path id="a121011_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" fill="#c00"/>
  </defs>
</svg>
<div style="display:inline-block">
圖1:<br>原始的 path<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <use xlink:href="#a121011_p1" />
</svg>
</div>
<div style="display:inline-block">
圖2:<br>使用 feImage<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <use xlink:href="#a121011_p1" style="filter:url(#a121011_fimg);" />
</svg>
</div>
<div style="display:inline-block">
圖3:<br>feImage+feTile<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <use xlink:href="#a121011_p1" style="filter:url(#a121011_ftile);" />
</svg>
</div>
<div style="display:inline-block">
圖4:<br>feBlend mode="multiply"<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <use xlink:href="#a121011_p1" style="filter:url(#a121011_fblend);" />
</svg>
</div>
<div style="display:inline-block">
圖5:<br>feBlend mode="color-dodge"<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <use xlink:href="#a121011_p1" style="filter:url(#a121011_fblend1);" />
</svg>
</div>
</div>
  
# feOffset

很單純的濾鏡，就是位移

```
  dx,dy    座標位移
  in       來源
```

利用 in="SourceAlpha" 可以取得陰影部位
              
```
$mmcode(r2)
```  
              
<div class="mmresult r2">
<svg width="300" height="300" viewBox="-50 -50 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <defs>
    <filter id="a121012_offset" x="-50" y="-50" width="300" height="300" >
      <feOffset dx=50 dy=50 in="SourceGraphic"/>
    </filter>
    <filter id="a121012_offset1" x="-50" y="-50" width="300" height="300" >
      <feOffset dx=-50 dy=50 in="SourceAlpha"/>
    </filter>
    <path id="a121012_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" fill="#0afa" />
  </defs>
  <use xlink:href="#a121012_p1" stroke="#f00" stroke-width=5 />
  <use xlink:href="#a121012_p1" filter="url(#a121012_offset)" />
  <use xlink:href="#a121012_p1" filter="url(#a121012_offset1)" />
</svg>  
</div>

利用 feBlend 結合兩張圖產生單一濾鏡的陰影效果<br>
filter 的每個效果後面可以加上 result="名稱" , 然後 in="名稱" 以及 in2="名稱" 來使用
              
```
$mmcode(r3)
```  
              
<div class="mmresult r3">
<svg width="300" height="300" viewBox="-50 -50 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <defs>
    <filter id="a121013_offset" x="-50" y="-50" width="300" height="300">
      <feOffset dx="-30" dy="30" in="SourceAlpha" result="a121013_rr1"></feOffset>
      <feOffset dx="30" dy="30" in="SourceAlpha" result="a121013_rr2"></feOffset>
      <feBlend in="SourceGraphic" in2="a121013_rr1" result="a121013_kk1"></feBlend>
      <feBlend in="a121013_kk1" in2="a121013_rr2"></feBlend>
    </filter>
    <path id="a121013_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" fill="#0af"></path>
  </defs>
  <use xlink:href="#a121013_p1" filter="url(#a121013_offset)"></use>
</svg>  
</div>

# feMerge , feMergeNode
              
feBlend 只能疊兩張圖，另一個疊圖用的是 feMerge

使用方式：由 feMergeNode 前後來調整順序
              
```
  <feMerge>
    <feMergeNode />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
              
```              
              
範例 :
              
```
$mmcode(r4)
```  
              
<div class="mmresult r4">
<svg width="300" height="300" viewBox="-50 -50 300 300" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <defs>
    <filter id="a121014_offset" x="-50" y="-50" width="300" height="300" >
      <feOffset dx=20 dy=20 in="SourceAlpha" result="a121014_m1"/>
      <feOffset dx=-20 dy=20 in="SourceAlpha" result="a121014_m2"/>
      <feMerge>
        <feMergeNode in="a121014_m1" />
        <feMergeNode in="a121014_m2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <path id="a121014_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" fill="#0af" />
  </defs>
  <use xlink:href="#a121014_p1" filter="url(#a121014_offset)" />
</svg>
  
</div>
  
# feGaussianBlur
  
就是高斯模糊
  
```
  in              來源
  stdDeviation    模糊程度
```
範例 :
  
```
$mmcode(r5)
```  
              
<div class="mmresult r5">
<svg width="300" height="300" viewBox="-50 -50 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa">
  <defs>
    <filter id="a121015_blur" x="-50" y="-50" width="300" height="300" >
      <feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
    </filter>
    <path id="a121015_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" fill="#0af" />
  </defs>
  <use xlink:href="#a121015_p1" filter="url(#a121015_blur)" />
/>
</svg>
</div>

# feFlood

功能很單純的填滿一個距形的顏色，在這個範例中，特別說明一下濾鏡預設的範圍
  
黑框為本來物件的範圍，左上角為 (50,50) 而綠色濾鏡的大小從 (0,0) 開始畫，大小佔滿整張圖，結果影響範圍是本來的 rect 上下左右都加大 10% ，如紅框一樣，第二個藍色濾鏡從 (80,60) 開始畫
  
```
$mmcode(r6)
```  
<div class="mmresult r6">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#ffa;">
  <defs>
    <filter id="a121016_flood">
      <feFlood x=80 y=60 width=200 height=200 flood-color="#0af" flood-opacity="1" />
    </filter>
    <filter id="a121016_flood1">
      <feFlood x=0 y=0 width=200 height=200 flood-color="#0fa" flood-opacity="1" />
    </filter>
  </defs>
  <rect x=50 y=50 width=100 height=100 filter="url(#a121016_flood1)"/>
  <rect x=50 y=50 width=100 height=100 filter="url(#a121016_flood)"/>
  <rect x=50 y=50 width=100 height=100 stroke="#000" fill="none"/>
  <rect x=40 y=40 width=120 height=120 stroke="#f00" fill="none"/>
</svg>
</div>

SVG 變形動畫

SVG 的動畫最有意思的應用之一就是變形，先來一個簡單範例<br>
範例中 path 的每一個點對點的分怖必須一樣，這樣跑起來才不會有問題
  
```
$mmcode(r1)
```
<div class="mmresult r1">
<svg width=300 height=300>
<path>
  <animate attributeName="d" values="M10,150 Q150,10 150,10 L290,150 L150,290;M150,10 Q290,150 290,150 L150,290 L200,150;M290,150 Q50,50 150,290 L0,0 L0,0;M10,150 Q150,10 150,10 L290,150 L150,290" dur="10s" repeatCount="indefinite"/>
  <animate attributeName="fill" values="#f00;#ff0;#0f0;#0ff;#00f;#f0f;#f00" dur="13s" repeatCount="indefinite"/>
</path>
</svg>  
</div>

加上 javascript 計算位置，可以做出多邊形變形動畫，和之前用 CSS 做的不同，最後做出來的 SVG 存檔後，就是單純圖檔，完全不需要 javascript 即可互動
  
實測結果相當有趣，firefox 會不正常顯示，當路徑被動畫修改後，小圓球卻不會修改路徑，還是走本來預設的三角形，chrome 和 safari 則沒有問題。
  
為了修正 firefox 的問題，用了重寫 html 的技巧，加了一個 **[Firefox fix]** 的 button
  
```
$mmcode(r2)
```
<div class="mmresult r2">
<svg width=300 height=330 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>
<path id="a121002_p1" d="M270,150 L90,253 L89,46 L89,46 L89,46 L89,46 L89,46 z" fill="#0af">
  <animate id="a121002_a3" attributeName="d" dur="2s" begin="a121002_b3.click" fill="freeze"/>
  <animate id="a121002_a4" attributeName="d" dur="2s" begin="a121002_b4.click" fill="freeze"/>
  <animate id="a121002_a5" attributeName="d" dur="2s" begin="a121002_b5.click" fill="freeze"/>
  <animate id="a121002_a6" attributeName="d" dur="2s" begin="a121002_b6.click" fill="freeze"/>
  <animate id="a121002_a7" attributeName="d" dur="2s" begin="a121002_b7.click" fill="freeze"/>
  <animate id="a121002_a8" attributeName="d" dur="2s" begin="a121002_b8.click" fill="freeze"/>
</path>
<circle cx=0 cy=0 r=13 fill="#fa0">
  <animateMotion id="a121002_c1" dur="3s" repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#a121002_p1" /> 
  </animateMotion>
</circle>
  <animateTransform attributeName="transform" dur="20s" type="rotate" values="0,150,150;360,150,150" repeatCount="indefinite"/>
</g>
<text id="a121002_b3" x=60 y=290>三角形</text>
<text id="a121002_b4" x=120 y=290>四邊形</text>
<text id="a121002_b5" x=180 y=290>五角形</text>
<text id="a121002_b6" x=60 y=315>六角形</text>
<text id="a121002_b7" x=120 y=315>七邊形</text>
<text id="a121002_b8" x=180 y=315>星　形</text>
</svg>
<br>
<button id="a121002_b1" style="font-size:1em">Firefox fix</button>
<script>
$(()=>
{
  let i,j,k,m;
  let deg;
  k=0;
  for (j=0;j<6;j++)
  {
    let hh="";
    let x,y;
    if (j==5)
      deg=360/5*2;
    else
      deg=360/(j+3);
    m="M";
    for (i=0;i<7;i++)
    {
      if ((j==5 && i<5) || (j!=5 && i<(j+3)))
      {
        x=150+120*Math.cos(3.14*(deg*i+k)/180);
        y=150+120*Math.sin(3.14*(deg*i+k)/180);
      }
      hh+=m+(~~x)+","+(~~y)+" ";
      m="L";
    }
    hh+="z";
    $("#a121002_a"+(j+3)).attr("to",hh);
    k+=77;
  }
  $("#a121002_b1").on("click",function()
  {
    $("#a121002_c1").html($("#a121002_c1").html());
  });
})
</script>
  
</div>

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月24日 星期四

2020年12月23日 星期三

2020年12月22日 星期二

2020年12月20日 星期日

2020年12月17日 星期四

2020年12月16日 星期三

2020年12月13日 星期日

2020年12月12日 星期六

2020年12月11日 星期五

2020年12月10日 星期四

2020年12月7日 星期一

2020年12月2日 星期三

2020年11月27日 星期五