切换SVG中的图层 [英] Toggle layer in SVG

问题描述

我正在尝试创建一个带有检查列表的HTML页面，我们也可以将其设置为大而不会降低质量。结果我想使用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.

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

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>

推荐答案

您可以使用JavaScript来切换 svg_2 开启或关闭取决于其先前的状态（使用JQuery的示例）：

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');
});

您还可以使用其他一些CSS属性（例如 display ）。

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

在此处查看并尝试： JSFiddle

See and try it here: JSFiddle

这篇关于切换SVG中的图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！