Toggle layer in SVG

Question

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 on the SVG so that I can toggle the group svg_2 (a check mark) on or off so that we have checked and unchecked box. It doesn't have to change when loaded, just need like an inline command that will do it.

<svg width="20%" height="20%" xmlns="http://www.w3.org/2000/svg">
    <rect id="svg_1" fill="#ffffff" stroke="#000000" stroke-width="10%" x="2.5%" y="2.5%" width="85%" height="85%" />
    <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>

Answer 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