SVGにリンクされている画像の彩度を下げるにはどうしたらいいですか？

Question

ボタンをクリックしたときにSVG内のリンクされたイメージをデタチュレートしようとしています（最初はカラーでロードする必要があります）。

私はこれをやって試してみた：

 $("#greyOut").click (function() { 
     $("#image1").css("filter", "grayscale(100%)"); 
    }); 

私もこれをやって試してみました：

 $("#greyOut").click (function() { 
     $("#image1").toggleClass("desaturate"); 
     }); 

    .desaturate{ 
     filter: grayscale(100%); 
    } 

マイSVGのコードは次のようになります。

<svg version="1.1" id="mySVG" viewBox="0 0 1036.1863 541.28723" height="152.76329mm" width="292.43481mm"> 
    <defs id="defs1"/> 
    <g transform="matrix(1,0,0,1,5.3227865,-408.7683)" id="svgGroup" style="fill:none"> 
    <image xlink:href="adamPNG.png" y="416.47034" x="-5.3228474" id="image1" preserveAspectRatio="none" height="533.58521" width="1029.7035" /> 

    //I've a lot of paths here so I've cut them out for my question 

    <path id="path1"...style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"> 
    </path> 
    </g> 
    </svg> 

私も試してみましたidを使わずに$("image")と呼んでも問題ありません。リンクされた画像のCSSを変更することはできますか？または<image>のxlink:href属性を画像のぼやけたバージョンに設定するだけですか？

更新

それは私がこれを行う場合に動作します：

 $("#greyOut").click (function() { 
     $('image').attr('xlink:href', 'adamPNGgrey.png'); 
    }); 

をそれが可能だ場合、私はまだ、むしろ別の画像にリンクするよりも、CSSでこれを行うことを好むだろう...

Answer 1

SVGを編集できるのであれば、私はSVGフィルタを使ったソリューションを持っています。コードスニペットで動作しません、私は外部jsfiddleを置く。

$("#greyOut").click(function() {); 
    $("#filter").toggleClass("filtered"); 
}); 

DEMO：はIE11では動作しませんhttps://jsfiddle.net/blonfu/aqdj01kn/13/

PS

UPDATE：あなたがブラウザをチェックする前に

がIEの場合は、あなたが、これを行うことができますし、 Firefox、Chromeなどでは最初のjQueryを、IEでは2番目のjQueryを使用します。

$("#greyOut").click(function() { 
    $("#filter image").attr("filter", "url(#grayscale)"); 
}); 

Answer 2

JavaScript専用のソリューションを以下のように実装すると、画像に適用される不飽和度を完全に制御することもできます。

JavaScriptの例here作業

(function(d){ 
     // Range input element 
    var gsRANGE = d.getElementById('grayscalerangeinput'), 

     // Function to alter saturation dynamically 
     changeSaturation = function(targetID,saturationValue){ 
     var gs = d.getElementById('grayscale'); 

     if(!!gs){ 
      gs.setAttribute('values',saturationValue); 
     } 
     else { 
      /* Define namespace URI for SVG 
      and filtering elements associated with it */ 
      var nsURI = "http://www.w3.org/2000/svg", 
       filter = d.createElementNS(nsURI,'filter'), 
       fe = d.createElementNS(nsURI,'feColorMatrix'); 

      // Set attributes for the filter element 
      filter.setAttribute('id','myFilter'); 
      fe.setAttribute('id','grayscale'); 
      fe.setAttribute('type','saturate'); 
      fe.setAttribute('values',saturationValue); 

      // Append the filter element 
      filter.appendChild(fe); 
      d.getElementById('mySVG').appendChild(filter); 

      // Set filter on target image 
      d.getElementById(targetID).setAttribute('filter','url(#myFilter)'); 
     } 
     }; 


    // Add event listeners on buttons and the range input 
    d.getElementById('greyOut').addEventListener('click',function(){ 
    gsRANGE.value = 0; 
    changeSaturation('image1',0); 
    }); 

    d.getElementById('recolor').addEventListener('click',function(){ 
    gsRANGE.value = 10; 
    changeSaturation('image1',1); 
    }); 

    gsRANGE.addEventListener('change',function(e){ 
    changeSaturation('image1',e.target.value/10); 
    }); 

})(document); 

追加のHTML

<button id="greyOut" type="button">DESATURATE IMAGE</button> 
<button id="recolor" type="button">SATURATE IMAGE</button> 
<div>0<input id="grayscalerangeinput" type="range" min="0" max="10" value="10">100</div> 

。