JSFiddle - React, Tailwind, and code Playground

by Helder da Rocha

HTML

<svg width="20%" height="20%" xmlns="http://www.w3.org/2000/svg">
  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
  <rect fill="#ffffff" stroke="#000000" stroke-width="10%" x="2.5%" y="2.5%" width="85%" height="85%" id="svg_1"/>
  <g id="svg_2">
   <line fill="none" stroke="#ff0000" stroke-width="10%" x1="43.5%" y1="77.5%" x2="10.5%" y2="49.5%" id="svg_3" stroke-linecap="round" stroke-linejoin="bevel"/>
   <line fill="none" stroke="#ff0000" stroke-width="10%" x1="95%" y1="9.5%" x2="44.5%" y2="78.5%" id="svg_4" stroke-linecap="round" stroke-linejoin="bevel"/>
  </g>
</svg>

CSS

#svg_2 {
    visibility: hidden;
}

JavaScript

$("svg").click(function() {
  if ( $('#svg_2').css('visibility') == 'hidden' )
    $('#svg_2').css('visibility','visible');
  else
    $('#svg_2').css('visibility','hidden');
});