svg矩阵滤色器似乎没有正常工作

Question

我尝试应用SVG滤镜，将颜色变为红色（207,42,39）。 矩阵将黑色（0,0,0,1）转换为（207,42,39,1）。

我必须做错事，因为2种颜色应该相同，但它们不是

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

有没有人有任何想法？

Answer 1

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;