Проблема с фильтрами SVG, чтобы сделать определенный цвет c прозрачным в изображении

Question

Я нашел svg-фильтр с несколькими эффектами фильтра, чтобы сделать определенный c цвет в изображении прозрачным. Я создал изображение с двумя цветами: Красный и Черный, и сделал черный цвет прозрачным.

Фильтры работают правильно, за исключением того, что вместо того, чтобы сделать все черные пиксели прозрачными, все еще есть тонкая черная линия, где встречаются черный и красный цвета.

Я не могу узнать что происходит не так.

<svg>
  <image id="ID_GraphicOff" display="inline" preserveAspectRatio="none" width="188" height="148" x="0" y="0" opacity="1" filter="url(#filter_CTT_00)" xlink:href="https://www.dropbox.com/s/6v30l0g1oqsuk6s/Red.png?raw=1"></image>

 <filter id="filter_CTT_00" RefCount="1">
    
   <feColorMatrix in="SourceGraphic" type="matrix" values="100.0 0.0 0.0 0.0 1.0 0.0 100.0 0.0 0.0 1.0 0.0 0.0 100.0 0.0 1.0 0.0 0.0 0.0 1.0 0.0" result="stage1Addition"></feColorMatrix>
   
    <feColorMatrix in="stage1Addition" type="matrix" values="-1.0 0.0 0.0 0.0 1.0  0.0 -1.0 0.0 0.0 1.0  0.0 0.0 -1.0 0.0 1.0  0.0 0.0 0.0 1.0 0.0" result="stage1Inversion"></feColorMatrix>
   
    <feColorMatrix in="SourceGraphic" type="matrix" values="100.0 0.0 0.0 0.0 -0.0 0.0 100.0 0.0 0.0 -0.0 0.0 0.0 100.0 0.0 -0.0 0.0 0.0 0.0 0.0 0.5" result="stage1Subtraction"></feColorMatrix>
   
    <feBlend in="stage1Inversion" in2="stage1Subtraction" mode="screen" result="stage1ColorZero"></feBlend>
   
    <feColorMatrix in="stage1ColorZero" type="matrix" values="2.0 0.0 0.0 0.0 0.0  0.0 2.0 0.0 0.0 0.0  0.0 0.0 2.0 0.0 0.0  0.0 0.0 0.0 2.0 -1.0" result="stage1AlphaCorrection"></feColorMatrix>
   
    <feColorMatrix in="stage1AlphaCorrection" type="matrix" values="1.0 1.0 1.0 0.0 0.0  1.0 1.0 1.0 0.0 0.0  1.0 1.0 1.0 0.0 0.0  0.0 0.0 0.0 1.0 0.0" result="stage2RGBAddition"></feColorMatrix>
   
    <feColorMatrix in="stage2RGBAddition" type="matrix" values="1.0 0.0 0.0 0.0 0.499999  0.0 1.0 0.0 0.0 0.499999  0.0 0.0 1.0 0.0 0.499999  0.0 0.0 0.0 1.0 0.0" result="stage2RGBThresholdRaise"></feColorMatrix>
   
    <feComponentTransfer result="stage2Discretization">
      <feFuncR type="discrete" tableValues="1.0 0.0"></feFuncR>
      <feFuncG type="discrete" tableValues="1.0 0.0"></feFuncG>
      <feFuncB type="discrete" tableValues="1.0 0.0"></feFuncB>
    </feComponentTransfer>
   
    <feColorMatrix in="stage2Discretization" type="matrix" values="0.0 0.0 0.0 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 1.0 -1.0 1.0 0.0" result="stage2ColorAlphaZero"></feColorMatrix>
   
    <feColorMatrix in="SourceGraphic" type="matrix" values="1.0 0.0 0.0 0.0 0.0  0.0 1.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.5" result="stage3AlphaZeroPointFive"></feColorMatrix>
   
    <feBlend in="stage2ColorAlphaZero" in2="stage3AlphaZeroPointFive" mode="screen" result="stage3ColorAlphaZero"></feBlend>
   
    <feColorMatrix in="stage3ColorAlphaZero" type="matrix" values="2.0 0.0 0.0 0.0 0.0  0.0 2.0 0.0 0.0 0.0  0.0 0.0 2.0 0.0 0.0  0.0 0.0 0.0 2.0 -1.0" result="stage3Correction"></feColorMatrix>
   
  </filter>
  
</svg>

Ссылка Codepen для HTML - https://codepen.io/manjunath-vadigeri/pen/ZEbvozX

Удалите атрибут filter="url(#filter_CTT_00)" в теге изображения, чтобы см. нефильтрованное изображение.

Answer 1

Этот фильтр слишком сложен для того, что вы пытаетесь сделать. Это гораздо более простая версия, которая позволяет избежать артефактов (которые, вероятно, создаются вашим feComponentTransfer)

 <filter id="filter_CTT_00" RefCount="1">
   <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0  3 -1 -1 0 0" result="stage1Addition"/>
  </filter>