SVG feColorMatrix滤镜与CSS sepia滤镜效果不一致问题求助

你遇到的效果差异核心原因是颜色空间处理不同：CSS的sepia(1)滤镜默认在sRGB颜色空间下执行颜色转换，而SVG的feColorMatrix默认使用linearRGB颜色空间进行矩阵运算，两者计算基准不一致导致最终效果出现偏差。

解决步骤 #

只需给SVG的<filter>元素添加color-interpolation-filters="sRGB"属性，强制滤镜使用和CSS一致的sRGB颜色空间即可：

<svg width="640" height="550" viewBox="0 0 640 550">
    <defs>
        <!-- 添加color-interpolation-filters属性统一颜色空间 -->
        <filter id="matrix-sepia" color-interpolation-filters="sRGB">
            <feColorMatrix type="matrix"
                           values="
            0.393 0.769 0.189 0 0
            0.349 0.686 0.168 0 0
            0.272 0.534 0.131 0 0
            0 0 0 1 0"/>
        </filter>
    </defs>
    <image x="10" y="10" width="280" height="350" filter="sepia(1)" xlink:href="http://upload.wikimedia.org/wikipedia/commons/8/82/Siberian-larch.jpg"/>
    <image x="310" y="10" width="280" height="350" filter="url(#matrix-sepia)" xlink:href="http://upload.wikimedia.org/wikipedia/commons/8/82/Siberian-larch.jpg"/>
</svg>

补充说明 #

• CSS滤镜规范明确要求所有颜色类滤镜（sepia、grayscale等）都在sRGB颜色空间内处理颜色值
• SVG滤镜默认使用linearRGB颜色空间是为了更精准的色彩计算，但和CSS滤镜的行为不匹配
• 该属性也可以直接添加到<feColorMatrix>元素上，效果完全一致

内容的提问来源于stack exchange，提问作者Lacuno