英文:
How to add two feColorMatrix results? Just the sum of each RGB channel
问题
抱歉，我不能执行您的请求，因为您要求我只翻译文本，并且不回答特定问题。以下是您提供的内容的中文翻译部分：
在SVG滤镜中是否有一种简单的方法可以将两个feColorMatrix中的两种颜色简单相加？尽管有许多可用的Porter-Duff操作，但似乎不存在简单的plus操作。
我的颜色矩阵是动态构建的，因此我发送给两者的值将不同，但作为静态示例。基本上，我有一个填充为rgb(68,114,196)的形状。我有两个使用它的颜色矩阵来获取新颜色。第一个的结果是RGB(43, 71,123)，第二个的结果是RGB(8,13,22)。现在我只想将它们相加以获取RGB(52, 88, 156)。简单吧？我无法找到在feBlend、feComposite或其他方法中执行此操作的方式。
希望这对您有所帮助。
英文:
I can't seem to find this anywhere, but is there a way in an SVG filter to simply add two colors from 2 feColorMatrix's together? While there are many Porter-Duff operations available, the simple plus one doesn't seem to exist.
My color matrix's are built dynamically, so the values I send in to both will be different, but as a static example. Basically, I have a shape with a fill of rgb(68,114,196). I have two color matrix's that use that to get a new color. The result of the first one is RGB(43, 71,123) and the second one is RGB(8,13,22). Now I just want to add these together to get RGB(52, 88, 156). Simple, right? I can find anyway in feBlend, feComposite or other ways to do this.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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 0.111116039 0 0 0 0 0 1 0"></feColorMatrix>
<!--need something here to add the two colors together, like this (but this doesn't work
<feComposite operator="plus" in="color1" in2="color2"></feComposite>-->
</filter>
</defs>
<path d="M0,0 144,0 144,144 0,144 Z " fill="rgb(68,114,196)" filter="url(#newColorFilter)"></path>
</svg>
<!-- end snippet -->
Does anyone know a simple way to sum two colors in a filter?
答案1
得分: 3
<feComposite>有一个arithmetic模式，您可以手动定义合成公式。如果i1和i2是输入通道，您可以设置四个参数：
result = k1*i1*i2 + k2*i1 + k3*i2 + k4
使用k2 = k3 = 1可以实现简单的加法。 （所有其他参数默认为0。）
顺便说一下，您的第二个颜色矩阵存在错误（多了一个值）。
<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>
<feComposite operator="arithmetic" k2="1" k3="1" in="color1" in2="color2"></feComposite>
</filter>
</defs>
<path d="M0,0 144,0 144,144 0,144 Z " fill="rgb(68,114,196)" filter="url(#newColorFilter)"></path>
</svg>
这是您提供的内容的翻译。
英文:
<feComposite> has an arithmetic mode where you can define the composition formula by hand. If i1 and i2 are the input channels, you can set four parameters:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4
A simple addition can be achieved with k2 = k3 = 1. (All other parameters are 0 by default.)
Yout second color matrix had an error (one value too much), btw.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<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>
<feComposite operator="arithmetic" k2="1" k3="1" in="color1" in2="color2"></feComposite>
</filter>
</defs>
<path d="M0,0 144,0 144,144 0,144 Z " fill="rgb(68,114,196)" filter="url(#newColorFilter)"></path>
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论