JSFiddle - React, Tailwind, and code Playground

by blonfu

HTML

<button id="greyOut">
  Grayscale/Color
</button>

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="152.76329mm" width="292.43481mm">
  <defs>

    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>

  <g id="filter">
    <g transform="matrix(1,0,0,1,5.3227865,-408.7683)" id="svgGroup" style="fill:none">
      <image xlink:href="http://dummy-images.com/abstract/dummy-300x100-Glass.jpg" y="416.47034" x="-5.3228474" id="image1" preserveAspectRatio="none" height="300" width="400" />


      <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>
  </g>
</svg>

CSS

.filtered {
   filter: url(#grayscale);
 }

JavaScript

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