javascript - 在 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