如何通過單擊按鈕隱藏JavaScript的SVG元素？

Question

我試圖這樣做，與此代碼：

svgElement.style.display = "none"; 

，但沒有奏效。如何用getElementById做到這一點？

Answer 1

可以使用樣式屬性display並將其設置爲none

function hideSVG() { 
 
    var style = document.getElementById("myRect").style.display; 
 
    if(style === "none") 
 
    document.getElementById("myRect").style.display = "block"; 
 
    else 
 
    document.getElementById("myRect").style.display = "none"; 
 
    //or to hide the all svg 
 
    //document.getElementById("mySvg").style.display = "none"; 
 
}

<svg id="mySvg"> 
 
    <rect id="myRect" fill="red" width="100px" height="100px"></rect> 
 
</svg> 
 
<button onclick="hideSVG()">Hide/Show</button>

Answer 2

使用SVG可見性屬性。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

能見度屬性可以控制圖形元素的可見性。使用隱藏或摺疊值當前圖形元素是不可見的 [更新] 但是display：none;和不透明度：0也可以。

但是知道不透明度（MDN鏈接）是最昂貴的計算（因爲它保持的元素活着單擊事件，雖然未在視覺顯示的元素），

然後知名度，

則顯示，https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display。

但是急於使用顯示並不總是最好的，因爲我們可以更好地控制具有可見性的元素（即「如果您試圖隱藏整個組，除了該組的一個特定成員，請使用'可見性」，因爲它是在繼承覆寫投放。」鏈接）

SVG Resource