SVG feComponentTransfer 为图像着色答案

【问题标题】：SVG feComponentTransfer to colorize imageSVG feComponentTransfer 为图像着色
【发布时间】：2019-09-13 20:44:15
【问题描述】：

我正在尝试使用滤镜为白色图像着色，但我得到了意想不到的结果

SVG 示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="373" height="400"
     viewBox="0 0 373 400">

    <defs>
        <filter id="colorize">
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.3333333"></feFuncR>
                <feFuncG type="linear" slope="0"></feFuncG>
                <feFuncB type="linear" slope="0.3333333"></feFuncB>
            </feComponentTransfer>
        </filter>
    </defs>

    <g filter="url(#colorize)">
        <image x="0" y="0" xlink:href="https://i.imgur.com/Df8zD8O.png" width="373" height="400"></image>
    </g>
    <text font-weight="bold" fill="rgb(85,0,85)" x="0" y="100" font-size="100">Surfer</text>

</svg>

预期的结果是图像变成与文本相同的颜色
在这种情况下#550055 或rgb(85,0,85)

我根据85 / 255 的结果将R 和B 的过滤器上的斜率设置为0.3333333，但如您所见，结果不正确

也许我使用了错误的计算方法来获得所需的颜色

需要注意的一点是，分量接近/等于 255 的颜色会产生更好的结果

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="373" height="400"
     viewBox="0 0 373 400">

    <defs>
        <filter id="colorize">
            <feComponentTransfer>
                <feFuncR type="linear" slope="255"></feFuncR>
                <feFuncG type="linear" slope="0"></feFuncG>
                <feFuncB type="linear" slope="255"></feFuncB>
            </feComponentTransfer>
        </filter>
    </defs>

    <g filter="url(#colorize)">
        <image x="0" y="0" xlink:href="https://i.imgur.com/Df8zD8O.png" width="373" height="400"></image>
    </g>
    <text font-weight="bold" fill="rgb(255,0,255)" x="0" y="100" font-size="100">Surfer</text>

</svg>

我的计算基于这个公式

C' = slope * C + intercept

我做错了什么？

【问题讨论】：

您可以将文字设为白色，并使用过滤器将其放入<g>
这只是一个例子来显示真实颜色和结果颜色之间的差异，但实际上文本不是图像的一部分

标签： svg colors rgb svg-filters

【解决方案1】：

most SVG filters is linearRGB 的默认色彩空间。不过，您似乎假设它是 sRGB。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="373" height="400"
     viewBox="0 0 373 400">

    <defs>
        <filter id="colorize" color-interpolation-filters="sRGB">
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.3333333"></feFuncR>
                <feFuncG type="linear" slope="0"></feFuncG>
                <feFuncB type="linear" slope="0.3333333"></feFuncB>
            </feComponentTransfer>
        </filter>
    </defs>

    <g filter="url(#colorize)">
        <image x="0" y="0" xlink:href="https://i.imgur.com/Df8zD8O.png" width="373" height="400"></image>
    </g>
    <text font-weight="bold" fill="rgb(85,0,85)" x="0" y="100" font-size="100">Surfer</text>

</svg>

【讨论】：

我不知道我到底在做什么，tbh。感谢您的帮助！

【解决方案2】：

您必须将颜色空间设置为 sRGB - 因为这是 CSS rgb() 颜色属性使用的颜色空间。（SVG 滤镜的默认颜色空间是 linearRGB）。

将color-interpolation-filters="sRGB" 添加到您的过滤器元素中，您将获得预期的结果。

【讨论】：