SVG feComponentTransfer 为图像着色

Question

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

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，但如您所见，结果不正确

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

需要注意的一件事是，具有分量 approaching/equaling 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

我做错了什么？

Answer 1

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

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

Answer 2

most SVG filters is linearRGB 的默认颜色 space。不过你似乎假设它是 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>

SVG feComponentTransfer 为图像着色

SVG feComponentTransfer to colorize image

rgb

svg

colors

svg-filters