Translate

2020年12月17日 星期四

有趣的 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

於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)