Translate

2020年12月24日 星期四

有趣的 SVG filter - 創造紋理

雖然知道 feTurbulence 可以用來創造很多假的紋路，例如之前做的雲一樣，但是對於非美術專長的我來說，還是無法運用熟練，參考了幾個範例，自己練習做幾個試試，很多會利用光線來達到凹凸材質的展現，相當有意思


有紋路的紙<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"></feTurbulence>
    <feSpecularLighting in="a122401_t1" lighting-color="#eed" specularExponent="2" surfaceScale="4" result="a122401_L1">
      <feDistantLight azimuth="45" elevation="30"></feDistantLight>    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122401_L1" in2="SourceGraphic"></feComposite>
  </filter>
</defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#aaa" style="filter: url(#a122401_f1)"></rect>
</svg>
有紋路的紙

岩石<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"></feTurbulence>
    <feSpecularLighting in="a122402_t1" lighting-color="#fff" specularExponent="20" surfaceScale="3" result="a122402_L1">
      <feDistantLight azimuth="45" elevation="30"></feDistantLight>    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122402_L1" in2="SourceGraphic"></feComposite>
  </filter>
</defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#000" style="filter: url(#a122402_f1)"></rect>
</svg>
岩石

好像某種牆壁的紋路<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"></feTurbulence>
    <feSpecularLighting in="a122403_t1" lighting-color="#fff" specularExponent="4" surfaceScale="3" result="a122403_L1">
      <feDistantLight azimuth="45" elevation="30"></feDistantLight>    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122403_L1" in2="SourceGraphic"></feComposite>
  </filter>
</defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#888" style="filter: url(#a122403_f1)"></rect>
</svg>
好像某種牆壁的紋路

好像某種牆壁的紋路<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"></feTurbulence>
    <feSpecularLighting in="a122404_t1" lighting-color="#fff" specularExponent="4" surfaceScale="5" result="a122404_L1">
      <feDistantLight azimuth="45" elevation="30"></feDistantLight>    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122404_L1" in2="SourceGraphic"></feComposite>
  </filter>
</defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#555" style="filter: url(#a122404_f1)"></rect>
</svg>
好像某種牆壁的紋路

好像某種牆壁的紋路<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>
好像某種牆壁的紋路

髮絲紋 ?<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"></feTurbulence>
    <feSpecularLighting in="a122405_t1" lighting-color="#fff" specularExponent="2" surfaceScale="3" result="a122405_L1">
      <feDistantLight azimuth="45" elevation="20"></feDistantLight>    
    </feSpecularLighting>
    <feComposite operator="atop" in="a122405_L1" in2="SourceGraphic"></feComposite>
  </filter>
</defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#000" style="filter: url(#a122405_f1)"></rect>
</svg>
髮絲紋 ?

不曉得像什麼<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"></feTurbulence>
    <feSpecularLighting in="a122406_t1" lighting-color="#fff" specularExponent="60" surfaceScale="30" result="a122406_L1">
      <feDistantLight azimuth="45" elevation="60"></feDistantLight>    
    </feSpecularLighting>
    <feFlood flood-color="#000" result="a122406_fd1"></feFlood>
    <feComposite operator="atop" in="a122406_fd1" in2="a122406_L1" result="a122406_fe1"></feComposite>
    <feComposite operator="atop" in="a122406_fe1" in2="SourceGraphic"></feComposite>
  </filter>
</defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#eee" style="filter: url(#a122406_f1)"></rect>
</svg>
不曉得像什麼

木頭紋理<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>
    <feFlood flood-color="#ea0" result="a122408_fd2"></feFlood>
    <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"></feFuncR>
        <feFuncG type="discrete" tableValues="0 0"></feFuncG>
        <feFuncB type="discrete" tableValues="0 0"></feFuncB>
        <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"></feFuncA>
    </feComponentTransfer>
    <feComposite in="a122408_fd1" in2="a122408_ft1" operator="in" result="a122408_fcin"></feComposite>
    <feComposite in="a122408_fd2" in2="a122408_ft1" operator="out" result="a122408_fcout"></feComposite>
    <feComposite in="a122408_fcin" in2="a122408_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122408_f1)"></rect>
</svg>
木頭紋理

好像蠻有藝術的紋理<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>
    <feFlood flood-color="#fff" result="a122409_fd2"></feFlood>
    <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"></feFuncA>
        <feFuncR type="discrete" tableValues="0 0"></feFuncR>
        <feFuncG type="discrete" tableValues="0 0"></feFuncG>
        <feFuncB type="discrete" tableValues="0 0"></feFuncB>
    </feComponentTransfer>
    <feComposite in="a122409_fd1" in2="a122409_ft1" operator="in" result="a122409_fcin"></feComposite>
    <feComposite in="a122409_fd2" in2="a122409_ft1" operator="out" result="a122409_fcout"></feComposite>
    <feComposite in="a122409_fcin" in2="a122409_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122409_f1)"></rect>
</svg>
好像蠻有藝術的紋理

好像蠻有藝術的紋理<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>
    <feFlood flood-color="#fff" result="a122410_fd2"></feFlood>
    <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"></feFuncA>
        <feFuncR type="discrete" tableValues="0 0"></feFuncR>
        <feFuncG type="discrete" tableValues="0 0"></feFuncG>
        <feFuncB type="discrete" tableValues="0 0"></feFuncB>
    </feComponentTransfer>
    <feComposite in="a122410_fd1" in2="a122410_ft1" operator="in" result="a122410_fcin"></feComposite>
    <feComposite in="a122410_fd2" in2="a122410_ft1" operator="out" result="a122410_fcout"></feComposite>
    <feComposite in="a122410_fcin" in2="a122410_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122410_f1)"></rect>
</svg>
好像蠻有藝術的紋理

模擬地圖<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>
    <feFlood flood-color="#0f0" result="a122411_fd2"></feFlood>
    <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"></feFuncA>
        <feFuncR type="discrete" tableValues="0 0"></feFuncR>
        <feFuncG type="discrete" tableValues="0 0"></feFuncG>
        <feFuncB type="discrete" tableValues="0 0"></feFuncB>
    </feComponentTransfer>
    <feComposite in="a122411_fd1" in2="a122411_ft1" operator="in" result="a122411_fcin"></feComposite>
    <feComposite in="a122411_fd2" in2="a122411_ft1" operator="out" result="a122411_fcout"></feComposite>
    <feComposite in="a122411_fcin" in2="a122411_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
</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>
模擬地圖

最後以這個火焰做為這篇的結束，對於非美術專長的我來說，能湊出這樣的火焰已經滿足了..... 


<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"></feDisplacementMap>  
  </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)"></rect>
  <ellipse cx="150" cy="200" rx="120" ry="200" fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"></ellipse>
  <ellipse cx="150" cy="240" rx="120" ry="200" fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"></ellipse>
  <ellipse cx="150" cy="260" rx="120" ry="200" fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"></ellipse>
</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>
於 沒有留言:
標籤：

2020年12月23日 星期三

有趣的 SVG filter - feDisplacementMap

feDisplacementMap 是個很有趣的東西，可以用一張平面的圖把另一張平面的圖做扭曲變形，第一次看到時覺得非常驚豔，以往只能等美術人員畫好的圖，原來可以只靠濾鏡做到，也想不到怎麼做的，是用了什麼神奇的方法來描述整個變形，直到看到這個公式才大概理解整個做法。

參考資料：這裡

P'(x,y) ← P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))

先來看一個範例

灰色是本來的圖，紅框是只有紅色在左上角的濾鏡，

當座標偏移都用綠色時，因為綠色=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 , 於是圖形就回到原處沒有偏移

*實測結果 Firefox 會不正常 


<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"></feImage>
    <feDisplacementMap in="a122301_t1" in2="SourceGraphic" scale="40" xChannelSelector="R" yChannelSelector="R">  
      <set attributeName="xChannelSelector" to="R" begin="a122301_cr.click"></set>
      <set attributeName="yChannelSelector" to="R" begin="a122301_cr.click"></set>
      <set attributeName="xChannelSelector" to="G" begin="a122301_cg.click"></set>
      <set attributeName="yChannelSelector" to="G" begin="a122301_cg.click"></set>
      <set attributeName="xChannelSelector" to="A" begin="a122301_ca.click"></set>
      <set attributeName="yChannelSelector" to="A" begin="a122301_ca.click"></set>
    </feDisplacementMap>
  </filter>
</defs>
  <rect x="0" y="0" width="150" height="150" fill="#ff00007f" style="filter: url(#a122301_f1)"></rect>
  <rect x="0" y="0" width="150" height="150" stroke="#f00" fill="none"></rect>
  <image href="https://yiharng.github.io/pic_circle.jpg" x="0" y="0" width="280" height="280" style="opacity:0.2"></image>
  <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>
Channel R Channel G Channel A

既然知道原理，那麼就可以弄個漸層來試試效果



原圖<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"></feImage>
    <feDisplacementMap in="a122301_t2" in2="SourceGraphic" scale="40" xChannelSelector="R" yChannelSelector="R" result="a122301_d2"></feDisplacementMap>
  </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>

原圖

濾鏡

加上一些計算，可以做出水波效果


<svg width="280" height="210">
  <rect x="0" y="0" width="280" height="210" fill="url(#a122303_rad1)"></rect> 
</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"></feImage>
    <feDisplacementMap in="a122303_t1" in2="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="R" result="a122303_d1"></feDisplacementMap>
  </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)"></rect> 
</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>

修改一下波的行徑方向，可以變成倒影，而這個範例卻又發現了 chrome 的 bug

Firefox 是本來就看不到效果，但是倒影的圖片翻轉是正常的

Chrome 很奇怪的，圖片翻轉居然沒效......花了一些時間測試，在 svg 外層包一個 div 並旋轉 0.001 度好像可以解決這個 bug , 但是在某些情況下又不行...... 

  <div style="transform:rotate(0.001deg)">
    <svg>
      .
      .
      .
    </svg>
  </div>

Safari 正常



<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"></feImage>
    <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)"></rect>
</svg>
</div>

<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="2s" repeatCount="indefinite"></animate></stop>';
  }
  $("#a122306_linear1").html(hh);
})
</script>

如果看不到水波和倒影，那麼可能你用的瀏覽器是 Firefox ，自從開始玩 SVG 後就常常發現這些瀏覽器有不少東西不支援或者支援一半。

Firefox 並不是不支援 feDisplacementMap 而是無法以及時畫的圖給濾鏡使用，以下範例用的是 feTurbulence 產生的圖，在所有瀏覽器都支援



<svg width="300" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="a122305_f1" filterUnits="userSpaceOnUse">
    <feTurbulence type="turbulence" baseFrequency="0.02 0.1" numOctaves="2" result="a122305_tt">
      <animate attributeName="baseFrequency" values="0.02 0.1;0.022 0.13;0.02 0.1" dur="15s" repeatCount="indefinite"></animate>
    </feTurbulence>
    <feDisplacementMap in2="a122305_tt" in="SourceGraphic" scale="40" xChannelSelector="R" yChannelSelector="G">  
    </feDisplacementMap>
  </filter>
</defs>
  <image href="https://yiharng.github.io/bird280.jpg" x="-20" y="0" width="320" height="200" preserveAspectRatio="none" style="transform:translate(0,430px) scale(1,-1) ;filter: url(#a122305_f1)"></image>
  <image href="https://yiharng.github.io/bird280.jpg" x="-20" y="0" width="320" height="240" preserveAspectRatio="none"></image>
</svg>
於 沒有留言:
標籤：

2020年12月22日 星期二

有趣的 SVG filter - feTurbulence

一直都在寫演算法及前後端架構程式，雖然對 2D/3D 計算還算略懂，自行開發的繪圖函式也只是基本的點、線、面、材質貼圖等，對於圖形學的東西接觸得不多，以前也只是和美術合作，由他們先做好圖我再拿來用，對於那些繪圖軟體怎麼計算出那些特效並不是很瞭解，開始玩 SVG 濾鏡後才慢慢理解，這些圖形學的演算法相當有趣，雖然可以由美術人員先做好再拿來用，如果自己做的話似忽可以做到更靈活的變化。

SVG 的濾鏡中 feTurbulence 就是一個當初想都沒想過的東西

參考資料： 這裡 , 這裡 , 這裡 , 這裡, 和 這裡, 以及一個 綜合教學

這裡還有 C++ 的函式庫 libnoise ，libperlin

參數說明

baseFrequency  基本頻率，預設 0 ，可以設兩個值 x y
numOctaves     倍頻數量，預設 1
seed           起始值，預設 0
stitchTiles    noStitch 不理會邊界(預設)，stitch 邊界平滑
type           turbulence 混亂(預設)，fractalNoise 分形噪聲

先來一個簡單範例


<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>
      <set attributeName="type" to="fractalNoise" begin="a122201_t2.click"></set>
      <set attributeName="numOctaves" to="1" begin="a122201_n1.click"></set>
      <set attributeName="numOctaves" to="2" begin="a122201_n2.click"></set>
      <set attributeName="baseFrequency" to="0.02" begin="a122201_b1.click"></set>
      <set attributeName="baseFrequency" to="0.03" begin="a122201_b2.click"></set>
      <set attributeName="seed" to="1" begin="a122201_s1.click"></set>
      <set attributeName="seed" to="2" begin="a122201_s2.click"></set>
    </feTurbulence>
  </filter>
</defs>
<rect x="0" y="0" width="300" height="300" style="filter: url(#a122201_f1)"></rect>
<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>
type turbulence fractalNoise numOctaves 　　1　　 　　2　　 baseFrequency 　　0.02　　 　　0.03　　 seed 　　1　　 　　2　　

那麼這個看起來就是一張好像亂七八糟的圖，有什麼用處呢 ? 既然是用來模擬大自然可見的一些有點亂的東西，例如雲，火焰等，這張圖就是一個基底， 有了基底就要拿來做點變化，這個時候得套用另一個強大的濾鏡 feDisplacementMap ，來製造有趣的影像

先來一個模擬雲朵的範例


<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"></feTurbulence>
    <feDisplacementMap in2="a122202_t1" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
  </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>
  <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#a122202_rad1)" style="filter: url(#a122202_f1)"></ellipse>
</svg>
於 沒有留言:
標籤：

2020年12月20日 星期日

有趣的 SVG filter - feConvolveMatrix

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

參考資料： 這裡 , 這裡

原理

陣列計算

以 3x3 為例，原來的值是 a,b,c,...,g,h,i 當使用陣列 去計算時，a 的值會等於

*注意，下圖 1~9 的排列和一開始的陣列相反

987
654
321
abc
def
ghi

而 b 的值會變成
987
654
321
abc
def
ghi

feConvolveMatrix 參數說明

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

先來一個簡單範例


<svg width="300" height="500" style="background-color:#fff" color-interpolation-filters="sRGB">
<defs>
<filter id="a122001_f1" width="100%" height="100%" x="0" y="0">
  <feConvolveMatrix in="SourceGraphic" order="3" edgeMode="none" kernelMatrix="-2 -1   0
     -1  1   1
     0   1   2" preserveAlpha="true"></feConvolveMatrix>
</filter>
</defs>
<text x="10" y="20">原圖</text>
<image href="https://yiharng.github.io/cat280.jpg" x="10" y="30" width="280" height="210"></image>
<text x="10" y="270">濾鏡</text>
<image href="https://yiharng.github.io/cat280.jpg" x="10" y="280" width="280" height="210" style="filter:url(#a122001_f1);"></image>
</svg>
原圖 濾鏡

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









c

m

n

於 沒有留言:
標籤：

2020年12月17日 星期四

有趣的 SVG filter - feColorMatrix

之前寫了一篇 CSS 的濾鏡 CSS 的 filter ，裡頭有一些設定，例如飽合度(saturate) 和色相旋轉(hue-rotate) 等，在 SVG 的濾鏡中也可以做到，而且還有一個更強大的 Matrix 轉換

參考資料：這裡 還有 這裡

首先先說明一下 feColorMatrix 的參數

  type     matrix , saturate , hueRotate , luminanceToAlpha
  values   設定的值

matrix

先從最複雜的 matrix 說明

matrix 的定義如下，從 到 就是 values 要填的值

先來一個簡單的範例, 這個範例中把 R,G,B 的值都乘以2，可以增加亮度


<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"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<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)"></image>
</svg>
原圖 濾鏡

經由這個矩陣，把 r,g,b 都乘以2，即可增加亮度

saturate

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


<svg width="300" height="400">
<defs>
<filter id="a121721_f2">
  <feColorMatrix in="SourceGraphic" type="saturate" values="2"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<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)"></image>
</svg>
原圖 濾鏡

hueRotate

hueRotate 公式


<svg width="300" height="400">
<defs>
<filter id="a121721_f3">
  <feColorMatrix in="SourceGraphic" type="hueRotate" values="180"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<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)"></image>
</svg>
原圖 濾鏡

luminanceToAlpha

luminanceToAlpha 公式


<svg width="300" height="400">
<defs>
<filter id="a121721_f4">
  <feColorMatrix in="SourceGraphic" type="luminanceToAlpha"></feColorMatrix>
</filter>
</defs>
<text x="80" y="20">原圖</text>
<image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200"></image>
<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)"></image>
</svg>
原圖 濾鏡

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








brightness

m

n

於 沒有留言:
標籤：

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

之前寫了一個 符號選擇的 app 可以產生 𝐗₂＋𝐘⁽⁴⁺⁵ⁿ⁾ 這樣的數學式，如果遇到更複雜的有沒有辦法呢？

這個時候就要利用其它更強大的工具來做了，其中我覺得最好用的是 MathJax ，以及 AsciiMath 的語法

MathJax 官網

LaTeX 語法說明

AsciiMath 官網

先來一個範例


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

剛才的運算式 原始字串：X_2+Y^((4+5n))

來個複雜一點的, 原始字串：Ans=((-b)+-sqrt(b^2-4ac))/(2a) 顯示如下 :

如果要顯示 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 。

濾鏡功能

參考資料：這裡 還有 這裡

使用方式：在裡面包著 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>

範例：


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)"></rect>
</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)"></rect>
</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)"></rect>
</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)"></rect>
</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)"></rect>
</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)"></rect>
</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)"></rect>
</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)"></rect>
</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)"></rect>
</svg><br>
identity

table LinearRGB

table sRGB

discrete LinearRGB

discrete sRGB

linear LinearRGB

linear sRGB

gamma LinearRGB

gamma sRGB

於 沒有留言:
標籤：

2020年12月16日 星期三

關於 gamma 2.2 和 LinearRGB

有在拍照和修圖的人一定用過 gamma 設定，可以讓暗部變亮，亮部又不會過曝， 根據 wiki 說明

為圖像進行伽馬編碼的目的是用來對人類視覺的特性進行補償，從而根據人類對光線或者黑白的感知，最大化地利用表示黑白的數據位或帶寬

有沒有覺得和 LinearRGB 很像呢 ?

gamma 的計算公式如下

out=pow(in,gamma)

把 0~255 的顏色對應畫出來，如下圖：

藍色的 gamma 1/2.2 幾乎和 LinearRGB 完全一樣

0 1 1 gamma 1/2.2 gamma 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">

參考資料：這裡

肉眼看顏色，其實不是線性的，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 算是比較特別的，可以把線條變粗或變細, 套用在字型上可以做出很有意思的效果 


<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>
    <set attributeName="operator" to="dilate" begin="a121311_dilate.click"></set>
    <set attributeName="radius" to="0" begin="a121311_r0.click"></set>
    <set attributeName="radius" to="1" begin="a121311_r1.click"></set>
    <set attributeName="radius" to="2" begin="a121311_r2.click"></set>
    <set attributeName="radius" to="3" begin="a121311_r3.click"></set>
  </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>
erode dilate radius 0 1 2 3 TEST

如果套用在圖形上結果如下 


<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>
    <set attributeName="operator" to="dilate" begin="a121312_dilate.click"></set>
    <set attributeName="radius" to="0" begin="a121312_r0.click"></set>
    <set attributeName="radius" to="1" begin="a121312_r1.click"></set>
    <set attributeName="radius" to="2" begin="a121312_r2.click"></set>
    <set attributeName="radius" to="3" begin="a121312_r3.click"></set>
  </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>
<image id="a121312_bomb" href="https://yiharng.github.io/bomb.png" x="155" y="80" width="30" height="30"></image>
<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>
  <set attributeName="href" to="https://yiharng.github.io/bomb.png" begin="a121312_bomb.click"></set>
</image>
</svg>
erode dilate radius 0 1 2 3

*實測結果，chrome 及 firefox 正常, safari 及 iphone 上的結果和其它瀏覽器有點不同, 而且在利用 set 做參數切換時反應有點遲頓

於 沒有留言:
標籤：

有趣的 SVG filter - feComposite

從一開始接觸濾鏡，我就在想，這些濾鏡都是對整個距形空間做處理，如果我只想針對物件範圍處理，難道只能再套用 mask 做裁切嗎 ? 其實有一個比 feBlend 和 feMerge 更強大的疊圖功能 feComposite

feComposite 的參數如下：參考資料

  in,in2        兩張圖
  operator      疊圖參數 
                over (預設)
                in
                out
                atop
                xor
                lighter
                arithmetic
  k1,k2,k3,k4   result = k1*in*in2 + k2*in + k3*in2 + k4

範例如下 :

實測結果 firefox 似忽不支援 lighter*


<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"></feImage>
    <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>
      <set attributeName="in2" to="a121301_img1" begin="a121301_ins.click"></set>
      <set attributeName="in" to="a121301_img1" begin="a121301_inp.click"></set>
      <set attributeName="in2" to="SourceGraphic" begin="a121301_inp.click"></set>
      <set attributeName="operator" to="over" begin="a121301_over.click"></set>
      <set attributeName="operator" to="in" begin="a121301_in.click"></set>
      <set attributeName="operator" to="out" begin="a121301_out.click"></set>
      <set attributeName="operator" to="atop" begin="a121301_atop.click"></set>
      <set attributeName="operator" to="xor" begin="a121301_xor.click"></set>
      <set attributeName="operator" to="lighter" begin="a121301_lighter.click"></set>
      <set attributeName="operator" to="arithmetic" begin="a121301_arithmetic.click"></set>
    </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>
operator in=Source in=Image over in out atop xor lighter arithmetic

熟悉這些變化後，就可以組合各種濾鏡玩效果


<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"></feImage>
    <feFlood width="40%" height="100%" flood-color="#fff" result="a121302_fo"></feFlood>
    <feComposite in="SourceGraphic" operator="arithmetic" k1="0" k2="-1" k3="0" k4="1" result="a121302_sss"></feComposite>
    <feComposite in2="a121302_sss" in="a121302_fo" result="a121302_sss1" operator="xor"></feComposite>
    <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>
於 沒有留言:
標籤：

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


<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"></fePointLight>
    </feDiffuseLighting>
  </filter>
  <circle cx="100" cy="100" r="80" fill="#0af" filter="url(#a121201_L1)"></circle>
</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"></feDistantLight>
    </feDiffuseLighting>
  </filter>
  <circle cx="100" cy="100" r="80" fill="#0af" filter="url(#a121201_L2)"></circle>
</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"></feSpotLight>
    </feDiffuseLighting>
  </filter>
  <circle cx="100" cy="100" r="80" fill="#0af" filter="url(#a121201_L3)"></circle>
</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>
<circle cx="50" cy="50" r="25" fill="#ffff" stroke-width="20" stroke="#000a"></circle>
</g>
</svg>
fePointLight
feDistantLight
feSpotLight

光源加上兩個 circle 用不同的 alpha 值時，似忽有上下層打光的感覺

feSpecularLighting

feSpecularLighting 和 feDiffuseLighting 有點不同，feSpecularLighting 會創造出一個有 Alpha 的圖層，然後可以在原圖再疊上這個有 Alpha 的圖後，就成了打光後的圖

在這個範例中，我設定了 specularExponent="5" 加強渲染強度，以及加上背景設定，可以更清楚的看到打光圖層實際的作用範圍


<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>
      <set attributeName="lighting-color" to="#fff" begin="a121202_ww.click"></set>
      <fePointLight x="130" y="60" z="30"></fePointLight>
    </feSpecularLighting>
  </filter>
  <circle cx="100" cy="100" r="80" fill="#000"></circle>
  <circle cx="100" cy="100" r="80" fill="#0af" filter="url(#a121202_L1)"></circle>
</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>
      <set attributeName="lighting-color" to="#fff" begin="a121202_ww.click"></set>
      <feDistantLight azimuth="45" elevation="30"></feDistantLight>
    </feSpecularLighting>
  </filter>
  <circle cx="100" cy="100" r="80" fill="#000"></circle>
  <circle cx="100" cy="100" r="80" fill="#0af" filter="url(#a121202_L2)"></circle>
</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>
      <set attributeName="lighting-color" to="#fff" begin="a121202_ww.click"></set>
      <feSpotLight x="0" y="0" z="100" pointsAtX="200" pointsAtY="200" pointsAtZ="0" limitingConeAngle="30"></feSpotLight>
    </feSpecularLighting>
  </filter>
  <circle cx="100" cy="100" r="80" fill="#000"></circle>
  <circle cx="100" cy="100" r="80" fill="#0af" filter="url(#a121202_L3)"></circle>
</svg>
</div>
<br>
光源加上兩個 circle 用不同的 alpha 值時，似忽有上下層打光的感覺
<div style="display:inline-block">
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="#000"></circle>
<g filter="url(#a121202_L1)">
<circle cx="100" cy="100" r="80" fill="#fff8"></circle>
<circle cx="50" cy="50" r="25" fill="#ffff" stroke-width="20" stroke="#000a"></circle>
</g>
</svg>
</div>

白光 黃光

fePointLight
feDistantLight
feSpotLight

光源加上兩個 circle 用不同的 alpha 值時，似忽有上下層打光的感覺

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

於 沒有留言:
標籤：

2020年12月11日 星期五

SVG filter 令人困擾的 feImage

filter 中的 feImage 有個有趣的用法，可以把任何一個 SVG 中的物件當作圖檔處理，範例如下


第一張圖，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"></feImage>
    <feBlend in2="a121101_img1" in="SourceGraphic"></feBlend>
  </filter>
</defs>
<circle id="c1" cx="150" cy="150" r="100" filter="url(#a121101_f1)" fill="#0ff5"></circle>
</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"></feImage>
    <feBlend in2="a121101_img2" in="SourceGraphic"></feBlend>
  </filter>
  <path id="a121101_p2" d="M0,150 L120,0 L240,150z" fill="#fa0"></path>
</defs>
<circle id="a121101_c2" cx="150" cy="150" r="100" filter="url(#a121101_f2)" fill="#0ff5"></circle>
</svg>
第一張圖，feImage 接了一張外部的 jpg 圖檔，原來的圓形套用後，可以正常顯示疊合的效果


第二張圖, feImage 接了 defs 中定義的 path 三角形，在 chrome 和 safari 有秀出來，但是 feImage 設定的 width 及 height 沒有變形作用，而 firefox 無法顯示，

那麼如果要以現成的圖放到 filter 使用有沒有什麼方法呢 ? 也許是我才疏學淺，找了很久似忽沒有現成的方法可以解決 firefox 的問題，也沒有其它引入圖形處理的方法，最後只有想到一個有點暴力的方式，利用之前用過的 inline SVG 來解決

由下面範例可以發現，本來的 240x150 的圖，在之前範例中並沒有被縮放成 240x240 , 而使用 data:image 的方式會被視為外部的圖檔，正常縮放為 240x240



<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="a121102_f2">
    <feImage id="a121102_feimg" xlink:href="" x="30" y="30" width="240" height="240" preserveAspectRatio="none" result="a121102_img2"></feImage>
    <feBlend in2="a121102_img2" in="SourceGraphic"></feBlend>
  </filter>
</defs>
<circle id="a121102_c2" cx="150" cy="150" r="100" filter="url(#a121102_f2)" fill="#0ff5"></circle>
</svg>
<script>
$(function()
{
  let hh='<svg width="240" height="150" xmlns="http://www.w3.org/2000/svg">'
        +'<path d="M0,150 L120,0 L240,150z" fill="#fa0"></path></svg>';
  $("#a121102_feimg").attr("xlink:href"
    ,"data:image/svg+xml;charset=UTF-8,"+escape(hh));
})
</script>
於 沒有留言:
標籤：

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 濾鏡影響範圍

<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"></feImage>
    </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"></feImage>
      <feTile></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"></feImage>
      <feTile></feTile>
      <feBlend in2="SourceGraphic" mode="multiply"></feBlend>
    </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"></feImage>
      <feTile></feTile>
      <feBlend in2="SourceGraphic" mode="color-dodge"></feBlend>
    </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"></path>
  </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"></use>
</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);"></use>
</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);"></use>
</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);"></use>
</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);"></use>
</svg>
</div>
圖1:
原始的 path
圖2:
使用 feImage
圖3:
feImage+feTile
圖4:
feBlend mode="multiply"
圖5:
feBlend mode="color-dodge"

feOffset

很單純的濾鏡，就是位移

  dx,dy    座標位移
  in       來源

利用 in="SourceAlpha" 可以取得陰影部位


<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"></feOffset>
    </filter>
    <filter id="a121012_offset1" x="-50" y="-50" width="300" height="300">
      <feOffset dx="-50" dy="50" in="SourceAlpha"></feOffset>
    </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"></path>
  </defs>
  <use xlink:href="#a121012_p1" stroke="#f00" stroke-width="5"></use>
  <use xlink:href="#a121012_p1" filter="url(#a121012_offset)"></use>
  <use xlink:href="#a121012_p1" filter="url(#a121012_offset1)"></use>
</svg>

利用 feBlend 結合兩張圖產生單一濾鏡的陰影效果
filter 的每個效果後面可以加上 result="名稱" , 然後 in="名稱" 以及 in2="名稱" 來使用


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

feMerge , feMergeNode

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

使用方式：由 feMergeNode 前後來調整順序

  <feMerge>
    <feMergeNode />
    <feMergeNode in="SourceGraphic" />
  </feMerge>

範例 :


<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>
      <feOffset dx="-20" dy="20" in="SourceAlpha" result="a121014_m2"></feOffset>
      <feMerge>
        <feMergeNode in="a121014_m1"></feMergeNode>
        <feMergeNode in="a121014_m2"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </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"></path>
  </defs>
  <use xlink:href="#a121014_p1" filter="url(#a121014_offset)"></use>
</svg>

feGaussianBlur

就是高斯模糊

  in              來源
  stdDeviation    模糊程度

範例 :


<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"></feGaussianBlur>
    </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"></path>
  </defs>
  <use xlink:href="#a121015_p1" filter="url(#a121015_blur)"></use>
/&gt;
</svg>
/>

feFlood

功能很單純的填滿一個距形的顏色，在這個範例中，特別說明一下濾鏡預設的範圍

黑框為本來物件的範圍，左上角為 (50,50) 而綠色濾鏡的大小從 (0,0) 開始畫，大小佔滿整張圖，結果影響範圍是本來的 rect 上下左右都加大 10% ，如紅框一樣，第二個藍色濾鏡從 (80,60) 開始畫


<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"></feFlood>
    </filter>
    <filter id="a121016_flood1">
      <feFlood x="0" y="0" width="200" height="200" flood-color="#0fa" flood-opacity="1"></feFlood>
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" filter="url(#a121016_flood1)"></rect>
  <rect x="50" y="50" width="100" height="100" filter="url(#a121016_flood)"></rect>
  <rect x="50" y="50" width="100" height="100" stroke="#000" fill="none"></rect>
  <rect x="40" y="40" width="120" height="120" stroke="#f00" fill="none"></rect>
</svg>
於 沒有留言:
標籤：

SVG 變形動畫

SVG 的動畫最有意思的應用之一就是變形，先來一個簡單範例
範例中 path 的每一個點對點的分怖必須一樣，這樣跑起來才不會有問題


<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>
  <animate attributeName="fill" values="#f00;#ff0;#0f0;#0ff;#00f;#f0f;#f00" dur="13s" repeatCount="indefinite"></animate>
</path>
</svg>

加上 javascript 計算位置，可以做出多邊形變形動畫，和之前用 CSS 做的不同，最後做出來的 SVG 存檔後，就是單純圖檔，完全不需要 javascript 即可互動

實測結果相當有趣，firefox 會不正常顯示，當路徑被動畫修改後，小圓球卻不會修改路徑，還是走本來預設的三角形，chrome 和 safari 則沒有問題。

為了修正 firefox 的問題，用了重寫 html 的技巧，加了一個 [Firefox fix] 的 button


<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>
  <animate id="a121002_a4" attributeName="d" dur="2s" begin="a121002_b4.click" fill="freeze"></animate>
  <animate id="a121002_a5" attributeName="d" dur="2s" begin="a121002_b5.click" fill="freeze"></animate>
  <animate id="a121002_a6" attributeName="d" dur="2s" begin="a121002_b6.click" fill="freeze"></animate>
  <animate id="a121002_a7" attributeName="d" dur="2s" begin="a121002_b7.click" fill="freeze"></animate>
  <animate id="a121002_a8" attributeName="d" dur="2s" begin="a121002_b8.click" fill="freeze"></animate>
</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"></mpath> 
  </animateMotion>
</circle>
  <animateTransform attributeName="transform" dur="20s" type="rotate" values="0,150,150;360,150,150" repeatCount="indefinite"></animateTransform>
</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>
三角形 四邊形 五角形 六角形 七邊形 星　形
於 沒有留言:
標籤：

2020年12月7日 星期一

SVG 與 javascript

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

動畫控制

SVG 的動畫控制上，針對單一動畫很奇怪的沒有 暫停 這個功能，只能對全部的 SVG 動畫全部暫停

指令 :

  svg.pauseAnimations();
  svg.unpauseAnimations();

範例如下:


<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"></animate>
</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>


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

  getCurrentTime()     - 取得目前動畫的時間
  beginElement()       - 開始動畫
  beginElementAt(時間)  - 在時間(秒)後開始動畫
  endElement()         - 停止動畫
  endElementAt(時間)    - 在時間(秒)後停止動畫

EVENT 的部份有這三個

  beginEvent           - 動畫開始時
  endEvent             - 動畫停止時
  repeatEvent          - 動畫重覆時

先來一個簡單的範例，範例中每 100ms 更新一次狀態，用下面這段程式碼來取得動畫執行中的 x 座標，如果要設定計 暫停 的功能，必須先取得座標，在下次執行時從這裡開始，然而這個解法有很多問題，最理想的還是等 SVG 的動畫新增暫停的指令

  document.getElementById("a120701_r1").x.animVal.value;

<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"></animate>
</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>



動畫時間 : 0.62
x 座標 : 10.00

既然可以用 javascript 控制，那麼先來修改一下上一篇的時鐘，來把時間調成目前時間


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

新增物件

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("參數",值);

範例如下：


<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"></rect>
</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"></rect>';
    }
    $("#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>


於 沒有留言:
標籤：

2020年12月2日 星期三

SVG 動畫

SVG 的動畫相當有趣也相當靈活，甚至可以互動，感覺上已經超越單純的動畫了

跟動畫相關的指令有 set, animate, animateTransform, animateMotion

set

首先先來一個 set 的範例

attributeName="屬性"
begin="開始的時機"
to="要改的值"

begin 可以用 1s(1秒) , 100ms (0.1秒) , 或各種 event， 當時機為 時間 時，代表的是該物件出現後開始計算時間

詳細的資料可以看這裡


<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>
  <set attributeName="x" to="30" begin="2s"></set>
  <set attributeName="x" to="40" begin="3s"></set>
  <set attributeName="x" to="50" begin="4s"></set>
  <set attributeName="x" to="60" begin="5s"></set>
  <set attributeName="x" to="70" begin="6s"></set>
  <set attributeName="x" to="80" begin="7s"></set>
  <set attributeName="x" to="90" begin="8s"></set>
</rect>
</g>
</defs>
<use xlink:href="#a120201_g1"></use>
</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"></set>';
    }
    $("#a120201_rect1").html(hh);
    $("#a120201_svg1").css("display","none");
    $("#a120201_svg2").html('<svg width="100%" height="70">'
                            +$("#a120201_g1").html()+'</svg>');
  });
})
</script>

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"
紫色方塊設定 calcMode="discrete"，沒有動畫直接跳過去
綠色方塊設定 keyTimes="0;0.6;0.9;1" ，一開始走很慢，後面跑很快
橘色方塊設定 calcMode="paced" , 行走速度不受分段影響
藍色方塊設定了 keySplines ，要記得加上 calcMode="spline" 


<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"></animate>
</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"></animate>
</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"></animate>
</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"></animate>
</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"></animate>
</rect>
</svg>

begin , end

svg 動畫中的 begin 和 end 很有意思，可以做到基本的互動，讓動晝不再只是動畫，
可以用 <a xlink:href="#id">click</a> 來觸發 begin ，也可以從 html 去觸發，方法如下：
詳細 API 可以參考這裡

  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,

來看一個範例 


<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"></rect>
  <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"></rect>
  <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"></animate>
</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"></animate>
  <set attributeName="fill" to="#0f0" begin="a120203_a1.repeat(1)"></set>
  <set attributeName="fill" to="#ff0" begin="a120203_a1.repeat(2)"></set>
  <set attributeName="fill" to="#f00" begin="a120203_a1.repeat(3)"></set>
</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"></animate>
</rect>
</svg>


點我開始 點我停止 方塊一 方塊二

accumulate

這個累加的設定，我還沒想到應用的地方，範例如下 :

每次 repeat 顏色都會改變，有加 accumulate="sum" 的方塊，在 repeat 時並沒有回到初始狀態， 而是以當前位置為原點，by=10 跑到 by=50 (以第一次 repeat 來說，會從 x=60 開始)

這個範例在 chrome 和 firefox 的結果又有點不同，我覺得 firefox 比較正確


<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>
accumulate="none" accumulate="sum"

animateTransform

除了本來 animate 的參數外，還多了幾個

type="transform 的種類"  
additive="取代或累加"，replace(預設), sum(效果累加)

範例如下 :


圖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"></animateTransform>
  </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>
    <animateTransform attributeName="transform" type="scale" values="1;2" dur="2s" begin="0s" repeatCount="indefinite" additive="sum"></animateTransform>
  </rect>
</svg>
圖1： 設定 transform scale 從 1 到 2


圖2： 設定 transform scale 從 1 到 2 ，並且 translate 移動方塊中心點，這個時候必須加上 additive="sum" ，兩個 transform 的設定才會累加

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，讓路徑不同區段有不同速度


<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"></path>
<circle cx="0" cy="0" r="10" fill="#f006">
  <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" path="M30,30 Q30 300 230,30z"></animateMotion>
</circle>
<rect x="-30" y="0" width="60" height="20" fill="#00f6">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
  <mpath xlink:href="#a120206_p1"></mpath>
</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"></mpath>
</animateMotion>
</path>
</g>
</svg>

那麼最後就用一個SVG的時鐘做為這一篇的結束 


<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"></circle>
<g id="a120207_g3">
<g id="a120207_g2">
<g id="a120207_g1">
<line x1="10" y1="150" x2="40" y2="150" stroke-width="3"></line>
<defs>
<line id="a120207_d1" x1="10" y1="150" x2="20" y2="150"></line>
</defs>
<use xlink:href="#a120207_d1" transform="rotate(6,150,150)"></use>
<use xlink:href="#a120207_d1" transform="rotate(12,150,150)"></use>
<use xlink:href="#a120207_d1" transform="rotate(18,150,150)"></use>
<use xlink:href="#a120207_d1" transform="rotate(24,150,150)"></use>
</g>
<use xlink:href="#a120207_g1" transform="rotate(30,150,150)"></use>
<use xlink:href="#a120207_g1" transform="rotate(60,150,150)"></use>
</g>
<use xlink:href="#a120207_g2" transform="rotate(90,150,150)"></use>
</g>
<use xlink:href="#a120207_g3" transform="rotate(180,150,150)"></use>
<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"></animateTransform>
</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"></animateTransform>
</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"></animateTransform>
</line>
<circle id="o2" cx="150" cy="150" r="8"></circle>
</svg>
於 沒有留言:
標籤：

2020年11月27日 星期五

SVG 的文字

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

text 的參數如下：

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

先來一個簡單範例


<svg width="320" height="200" viewBox="0 0 420 200" style="background-color:#ffa">
<text x="10" y="160" stroke-width="10" stroke="#f00" fill="#0ff" style="font-size:180px;font-weight:900">1a</text>
<text x="210" y="160" stroke-linejoin="round" stroke-width="10" stroke="#f00" fill="#0ff" style="font-size:180px;font-weight:900">1a</text>
</svg>
1a 1a

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

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

text-bottom 測試1a

CSS 的文字有個很特別的設計，利用類似陣列的方式為每一個字設定屬性


<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>
abcde

也可以用 dx 和 dy 做偏移


<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>
abcde

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


<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>
abcde ddd

textLength 和 lengthAdjust 搭配，設定字串長度後，看要用空白還是變形的方式填空間


<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>
abcde abcde abcde 直寫測試123

tspan

當一段文字想要有不同設定時，可以用 tspan ，就如同 css 的 span 一樣，搭配 dominant-baseline 就可以做到上標字和下標字的效果，

*經實測結果 Firefox 會不正常顯示，以下正確結果應該顯示為 X₂＋Y²＝Z⁽²ⁿ⁺¹⁾


<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>
abc123defdefghi X 2 +Y 2 =Z (2n+1)

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


<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>
X 2 +Y 2 =Z (2n+1)

為了處理上標和下標問題，只好利用 javascript 來協助，加上 svgsup 和 svgsub 兩個 class ，由 javascript 來處理 dy 的問題，程式碼很簡單，效果也不錯


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

<script>
$(function()
{
  $(".svgsup").attr("dy","-1em");
  $(".svgsup + tspan").attr("dy","0.6em");
})
</script>
X 2 +Y 2 =Z (2n+1)

textPath

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

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


<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"></path>
</defs>
<use xlink:href="#a112709_p1" fill="none" stroke="#fa0" stroke-width="2"></use>
<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"></use>
<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"></use>
<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"></use>
<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"></use>
<text fill="#000" style="font-size:24px;writing-mode:vertical-lr;">
  <textPath href="#a112709_p1">直式書寫 writing-mode:vertical-lr;
  </textPath>
</text>
</svg>
文字可以隨著路徑跑

startOffset="100"

可以使用tspan來做效果

這個設定在 iPhone 及 safari 沒用
dominant-baseline="central"

直式書寫 writing-mode:vertical-lr;

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

方法如下 :

  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}

取得長度後就可以計算平均分布的位置 


<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>
文字可以隨著路徑跑喲
於 沒有留言:
標籤：
訂閱： 文章 (Atom)