Question

我需要使用CSS和SVG过滤器在我的图像上应用过滤器“色彩平衡”，

那么如何添加滤镜颜色平衡以及如何在图像中恢复原始颜色

这是我的代码，但我没有看到任何变化

<html> 
<style>
#filt{
filter:url(feColor-balance.svg#balance);
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="balance">
        <feColorMatrix type="matrix"
            values="1.3 0 0 0 0
                0 1.1 0 0 0
                0 0 0.7 0 0
                0 0 0 1 0"/>
    </filter>
</defs>

<image xlink:href="http://www.mivision.com.au/uploads/ufiles/xx/oct/mv_Feb_Feature_eyes_in_art_My_beautiful_retina.jpg" x="5" y="5" width="190" height="290"/>

<image xlink:href="http://www.mivision.com.au/uploads/ufiles/xx/oct/mv_Feb_Feature_eyes_in_art_My_beautiful_retina.jpg" id="filt" x="205" y="5" width="190" height="290"/>


</svg>

</body>
</html>

Answer 1

你的过滤器在同一个文件中，所以它只是#balance而不是feColor-balance.svg，除非那就是你所谓的html文件，这是不寻常的。

此外，您还需要为svg元素提供宽度和高度值，否则只有在修复SVG大小调整错误之后才能在Chrome上运行。

<html> 
<style>
#filt{
filter:url(#balance);
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
  <defs>
    <filter id="balance">
        <feColorMatrix type="matrix"
            values="1.3 0 0 0 0
                0 1.1 0 0 0
                0 0 0.7 0 0
                0 0 0 1 0"/>
    </filter>
</defs>

<image xlink:href="http://www.mivision.com.au/uploads/ufiles/xx/oct/mv_Feb_Feature_eyes_in_art_My_beautiful_retina.jpg" x="5" y="5" width="190" height="290"/>

<image xlink:href="http://www.mivision.com.au/uploads/ufiles/xx/oct/mv_Feb_Feature_eyes_in_art_My_beautiful_retina.jpg" id="filt" x="205" y="5" width="190" height="290"/>


</svg>

</body>
</html>

SVG的色彩平衡效果

1 个答案: