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)

我根据0.3333333的结果将R和B的滤波器的斜率设置为85 / 255，但您会看到结果不正确

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

要注意的一件事是，具有接近/等于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

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

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

Answer 2

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>

SVG feComponentTransfer使图像着色

2 个答案: