在 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

您可以使用 JavaScriptsvg_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