Toggle Layer In Svg

I am trying to create a HTML page with a check list that we can also make it large without losing quality. As a result I want to use SVG. I would like to have a script to operate

Solution 1:

You can use JavaScript to toggle the svg_2 on or off depending on its previous state (example using JQuery):

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

You could also use some other CSS attribute (such as display).

See and try it here: JSFiddle