SVG中的切换图层

Question

我正在尝试使用检查列表创建一个HTML页面，我们也可以在不丢失质量的情况下使它变大。因此我想使用SVG。

我想要一个脚本来操作SVG，这样我就可以将组svg_2（复选标记）打开或关闭，以便我们检查并取消选中框。它在加载时不需要改变，只需要像内联命令那样就可以了。

<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

您可以使用JavaScript来切换svg_2或关闭根据其以前的状态（使用JQuery为例）：

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

你也可以使用一些其他的CSS属性（如display）。

见这里试试吧：JSFiddle