如何在SVG滤镜中叠加两个feColorMatrix的颜色结果？

你之前用feComposite operator="plus"没效果，是因为这个操作符只对Alpha通道生效，不会作用于RGB颜色通道。要实现颜色相加，推荐这两种实用方法：

方法一：用feComposite的arithmetic操作符（最直接） #

feComposite的arithmetic模式支持自定义颜色计算，通过设置参数可实现纯加法。计算公式为：
result = k1*in1*in2 + k2*in1 + k3*in2 + k4
只要把k1=0、k2=1、k3=1、k4=0，就能得到result = in1 + in2，刚好是两个颜色的RGB通道直接相加。

修改后的完整代码：

<svg x="50" y="20" width="144" height="144" overflow="visible">
  <defs>
    <filter id="newColorFilter" color-interpolation-filters="sRGB">
      <feColorMatrix in="SourceGraphic" result="color1" type="matrix" values="0.626095953 0 0 0 0 0 0.626095953 0 0 0 0 0 0.626095953 0 0 0 0 0 1 0"></feColorMatrix>
      <feColorMatrix in="SourceGraphic" result="color2" type="matrix" values="0.111116039 0 0 0 0 0 0.111116039 0 0 0 0 0 0.111116039 0 0 0 0 0 1 0"></feColorMatrix>
      <!-- 核心：用arithmetic实现RGB通道相加 -->
      <feComposite operator="arithmetic" in="color1" in2="color2" k1="0" k2="1" k3="1" k4="0"/>
    </filter>
  </defs>
  <path d="M0,0 144,0 144,144 0,144 Z " fill="rgb(68,114,196)" filter="url(#newColorFilter)"></path>
</svg>

方法二：添加颜色溢出保护（可选） #

如果相加后的颜色值超过sRGB的0-255范围（对应滤镜里的0-1数值），会出现颜色溢出变白色的情况。可以在加法步骤后加feComponentTransfer做截断处理：

<!-- 在arithmetic步骤之后添加 -->
<feComponentTransfer>
  <feFuncR type="clamp"/>
  <feFuncG type="clamp"/>
  <feFuncB type="clamp"/>
  <feFuncA type="clamp"/>
</feComponentTransfer>

内容的提问来源于stack exchange，提问作者Meihua