SVG中的切換圖層

我正在嘗試使用檢查列表創建一個HTML頁面，我們也可以在不丟失質量的情況下使它變大。因此我想使用SVG。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>

來源

2014-05-08 traisjames

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

來源

2014-05-08 20:41:11 helderdarocha

我會投了兩次有在那裏，準備我的代碼去與你的的jsfiddle鏈接。這是一個好主意！ – traisjames

SVG中的切換圖層

回答

相關問題