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 ではありません。

また、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>
于 2013-10-21T16:06:32.880 に答える