我正在尝试创建一个带有检查列表的 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>
最佳答案
您可以使用 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
关于javascript - 在 SVG 中切换图层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23548617/