我需要使用 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>
最佳答案
您的过滤器位于同一个文件中，因此它只是#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>
关于javascript - SVG 的色彩平衡效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19499007/