Блог

Как вычислить feColorMatrix?

Я не знаю, почему мои вычисления неверны. Я использую для добавления фильтра в circle, затем пытаюсь вычислить конечный результат.

Предполагая, что «красный» равен (255,0,0), когда я использую feColorMatrix

 value="
 .5 0 0 0 0
 0 1 0 0 0
 0 0 1 0 0
 0 0 0 1 0"
to mult 
255   //red Matrix,it is rgba(255,0,0,0)
 0
 0
 0
  

Конечный результат должен быть (127,0,0), но я получаю (187,0,0)

Вот как я вычисляю

 <svg width="100%" height="100%" viewBox="0 0 150 120" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="colorMatrix">
      <feColorMatrix in="SourceGraphic" type="matrix" values="
         .5 0 0 0 0
         0 1 0 0 0
         0 0 1 0 0
         0 0 0 1 0" />
  </filter>
  <g filter="">
      <circle cx="30" cy="30" r="20" fill="red"  /> //circle1
  </g>
  <g filter="url(#colorMatrix)">
      <circle cx="80" cy="30" r="20" fill="red"  /> //circle2
  </g>
</svg>
  

изображение круга

По умолчанию большинство фильтров используют цветовое пространство linearRGB. Вы забыли выполнить это преобразование или оно вам не нужно. Вы можете указать фильтру работать в цветовом пространстве sRGB, а затем получить ожидаемый результат.

 <svg width="100%" height="100%" viewBox="0 0 150 120" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <filter id="colorMatrix" color-interpolation-filters="sRGB">
      <feColorMatrix in="SourceGraphic" type="matrix" values="
         .5 0 0 0 0
         0 1 0 0 0
         0 0 1 0 0
         0 0 0 1 0" />
  </filter>
  <g filter="">
      <circle cx="30" cy="30" r="20" fill="red"  /> //circle1
  </g>
  <g filter="url(#colorMatrix)">
      <circle cx="80" cy="30" r="20" fill="red"  /> //circle2
  </g>
</svg>