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的{{1}}属性设置为图像的去饱和版本？

更新

如果我这样做会有效：

<image>

我仍然宁愿用CSS做这件事而不是链接到另一张图片中，如果可能的话......

Answer 1

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

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

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

PS 不能在IE11中使用

更新：

对于IE，你可以这样做，在你检查浏览器并使用第一个jQuery for Firefox，Chrome等之后，第二个用于IE：

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

Answer 2

如果您实施类似下面的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。

如何对SVG中链接的图像进行去饱和处理？

2 个答案: