svg 矩阵滤色器似乎无法正常工作

Question

我正在尝试应用 SVG 滤镜，将颜色变为红色阴影 (207, 42, 39)。矩阵将黑色 (0, 0, 0, 1) 转换为 (207, 42, 39, 1).

我一定是做错了什么，因为这两种颜色应该是一样的，但它们不是

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="red">
        <feColorMatrix in="SourceGraphic" type="matrix" values="
             0.18823529411764706 0 0 0 0.8117647058823529
                0 0.8352941176470589 0 0 0.16470588235294117
                0 0 0.8470588235294118 0 0.15294117647058825
                0 0 0 1 0" />
    </filter>

    <g filter="url(#red)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(207, 42, 39, 1)" />
    </g>
</svg>

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="superred">
        <feColorMatrix in="SourceGraphic" type="matrix" values="
            1 0 0 0 1
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0" />
    </filter>

    <g filter="url(#superred)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(255, 0, 0, 1)" />
    </g>
</svg>

有没有人有什么想法？

Answer 1

默认情况下 linearRGB colour space 中的 feColorMatrix 过滤器运行s 而不是 sRGB 颜色 space。我已将下面的滤镜更改为 sRGB 颜色 space 中的运行，这似乎是您想要的。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="red">
        <feColorMatrix in="SourceGraphic" color-interpolation-filters="sRGB" type="matrix" values="
             0.18823529411764706 0 0 0 0.8117647058823529
                0 0.8352941176470589 0 0 0.16470588235294117
                0 0 0.8470588235294118 0 0.15294117647058825
                0 0 0 1 0" />
    </filter>

    <g filter="url(#red)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(207, 42, 39, 1)" />
    </g>
</svg>

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <filter id="superred">
        <feColorMatrix in="SourceGraphic" type="matrix" values="
            1 0 0 0 1
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0" />
    </filter>

    <g filter="url(#superred)">
        <circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, 1)" />
    </g>

    <g>
        <circle cx="200" cy="50" r="50" fill="rgba(255, 0, 0, 1)" />
    </g>
</svg>

svg 矩阵滤色器似乎无法正常工作

svg matrix color filter doesn't seem to work properly

svg

svg-filters