title: SVG how to calculate feColorMatrix?
body: <p>How to calculate feColorMatrix?</p>
  <p>I don't know why my calculation is incorrect.
  I use  to add a filter to circle, then I try to calculate the final result.</p>
  <p>Assuming 'red' is (255,0,0) when I use feColorMatrix</p>
  <pre><code>value=&quot;
   .5 0 0 0 0
   0 1 0 0 0
   0 0 1 0 0
   0 0 0 1 0&quot;
  to mult 
  255   //red Matrix,it is rgba(255,0,0,0)
   0
   0
   0
  </code></pre>
  <p>The final result should be (127,0,0) but in I get (187,0,0)</p>
  <p>This is how I calculate
  <img src="https://i.stack.imgur.com/u5fw8.png" alt="This is how I calculate" /></p>
  <pre><code>&lt;svg width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 150 120&quot; preserveAspectRatio=&quot;xMidYMid meet&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
  
    &lt;filter id=&quot;colorMatrix&quot;&gt;
        &lt;feColorMatrix in=&quot;SourceGraphic&quot; type=&quot;matrix&quot; values=&quot;
           .5 0 0 0 0
           0 1 0 0 0
           0 0 1 0 0
           0 0 0 1 0&quot; /&gt;
    &lt;/filter&gt;
    &lt;g filter=&quot;&quot;&gt;
        &lt;circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;20&quot; fill=&quot;red&quot;  /&gt; //circle1
    &lt;/g&gt;
    &lt;g filter=&quot;url(#colorMatrix)&quot;&gt;
        &lt;circle cx=&quot;80&quot; cy=&quot;30&quot; r=&quot;20&quot; fill=&quot;red&quot;  /&gt; //circle2
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/rG9Tu.png" rel="nofollow noreferrer">circle image</a></p>