我如何去饱和SVG中链接的图像？

当我点击一个按钮（我最初需要它加载颜色）时，我试图在我的SVG中去饱和链接的图像。我如何去饱和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，或者我应该只将<image>的xlink:href属性设置为我的图像的去饱和版本？

更新

如果我这样做，它将正常工作：

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

我还是喜欢用CSS来做到这一点，而不是在另一个图像链接，如果可能的话...

来源

2016-07-14 truly-daunting

我不确定你可以切换CSS内部的类......也许属性但不是类。 - http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass –

你的代码适合我：https：//jsfiddle.net/blonfu/aqdj01kn/2/ – blonfu

你JSFiddle代码不会为我工作：/当我点击按钮时没有任何反应......你使用什么浏览器？ –

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

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

DEMO：https://jsfiddle.net/blonfu/aqdj01kn/13/

PS不中IE11工作

UPDATE：

对于IE，你可以做到这一点，你检查浏览器前，使用第一个用于Firefox，Chrome等的jQuery，第二个用于IE：

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

来源

2016-07-14 11:38:37 blonfu

这适用于Chrome！谢谢:) –

我编辑IE的答案，但你必须做一个功能，知道浏览器使用什么 – blonfu

如果您实施的是像下面这种仅支持JavaScript的解决方案，您甚至可以全面控制在图像上应用的去饱和度。

的JavaScript

(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>

工作实例here。

来源

2016-07-14 13:01:03

我如何去饱和SVG中链接的图像？

回答

相关问题