SVGフィルタを使用して1つの色を置き換えます。

Question

IMG画像を取り込み、正確な色を別の色に置き換えることはできますか？たとえば#fffから＃000まで、他の色は変更しません。おそらくSVGフィルターのカラーマトリックスが助けになるでしょうか？

Answer 1

CSS background-blend-mode: exclusion;のようなもの？それを見たhere。

答えはありませんが、コメントするには十分な評判がありません。

Answer 2

これはCanvasとは関係ありません。 SVGでも可能ですが、それは複雑です。次のメソッドは、従来の完全に不透明なイメージで動作します。最初に、長いComponentTransferを使用して、各チャンネルの一致しない色の値をすべて0に変換し、一致する色の値を1に変換します（256 member tableValues配列のソール "1"のインデックスはr、g、値）。次に、結果として得られる白のピクセル以外のすべてのアルファをカラーマトリックスを使ってゼロにします。その結果をターゲットカラーのfeFloodでマスクとして使用し、元のグラフィックの上に結果を合成します。たとえば、次のコードは特定の色を置き換えます - rgb（87、78、29）を赤で置き換えます。

<svg width="800px" height="600px" viewBox="0 0 800 600"> 
 
     <defs> 
 
     <filter id="color-replace" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"> 
 
    
 
     <!--Replace rgb(87,78,29) with red--> 
 
     <feComponentTransfer> 
 
      <feFuncR type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/> 
 
      <feFuncG type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/> 
 
      <feFuncB type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/> 
 
     </feComponentTransfer> 
 
     
 
    <feColorMatrix type="matrix" values="1 0 0 0 0 
 
              0 1 0 0 0 
 
              0 0 1 0 0 
 
              1 1 1 1 -3" result="selectedColor"/> 
 
     
 
      <feFlood flood-color="red"/> 
 
      <feComposite operator="in" in2="selectedColor"/> 
 
      <feComposite operator="over" in2="SourceGraphic"/> 
 
     </filter> 
 
     </defs> 
 
    <g filter="url(#color-replace)"> 
 
     <rect x="50" y="50" height="100" width="100" fill="rgb(86,77,28)"/> 
 
     <rect x="250" y="50" height="100" width="100" fill="rgb(86,77,29)"/> 
 
     <rect x="450" y="50" height="100" width="100" fill="rgb(86,78,29)"/> 
 
     <rect x="50" y="250" height="100" width="100" fill="rgb(87,77,29)"/> 
 
     <rect x="250" y="250" height="100" width="100" fill="rgb(87,78,29)"/> 
 
     <rect x="450" y="250" height="100" width="100" fill="rgb(87,78,30)"/> 
 
     <rect x="50" y="450" height="100" width="100" fill="rgb(88,78,30)"/> 
 
     <rect x="250" y="450" height="100" width="100" fill="rgb(88,79,29)"/> 
 
      <rect x="450" y="450" height="100" width="100" fill="rgb(88,79,30)"/> 
 
     </g> 
 
    </svg>