0

我需要使用 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>
4

1 回答 1

0

您的过滤器在同一个文件中，因此它只是#balance 而不是 feColor-balance.svg，除非这就是您所称的 html 文件，这将是不寻常的。

您还需要为 svg 元素提供宽度和高度值，否则它只能在 Chrome 上工作，直到它们的 SVG 大小错误得到修复。

<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>
于 2013-10-21T16:06:32.880 回答