javascript - 如何对 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>

我也试过只打电话 $("image")而不是 id，但这也不起作用。是否可以更改链接图像的 CSS，或者我应该只设置 xlink:href <image> 的属性到我图像的去饱和版本？

更新

如果我这样做，它会起作用:

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

如果可能的话，我仍然更愿意使用 CSS 而不是链接到另一张图片中......

Answer 1

如果您可以编辑 SVG，我有一个带有 SVG 过滤器的解决方案。在代码片段不起作用时，我放置了一个外部 jsfiddle。

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

演示: https://jsfiddle.net/blonfu/aqdj01kn/13/

PS 在 IE11 中不工作

更新:

对于 IE，您可以在检查浏览器并为 Firefox、Chrome 等使用第一个 jQuery，为 IE 使用第二个之前执行此操作:

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