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

【问题标题】：svg matrix color filter doesn't seem to work properlysvg 矩阵滤色器似乎无法正常工作
【发布时间】：2018-07-10 20:55:12
【问题描述】：

我正在尝试应用 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>

有人有什么想法吗？

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

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

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

【讨论】：