Question

我尝试使用此代码执行此操作：

svgElement.style.display = "none";

但它没有用。如何用getElementById做到这一点？

Answer 1

使用SVG可见性属性。

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

使用visibility属性可以控制图形元素的可见性。使用隐藏或折叠值时，当前图形元素是不可见的 [更新] 但是显示：无;和不透明度：0也可以。

但请记住，不透明度（MDN Link）的计算成本最高（因为即使元素未在视觉上显示，它也会使元素点击事件保持活动状态），

然后可见度，

然后显示https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display。

但是急于使用显示器并不总是最好的，因为我们可以通过可见性更好地控制元素。（即＆＃34;如果您试图隐藏整个群组，除了该群组的某个特定成员，请使用＆＃39;可见性＆＃39;因为它在继承中可以覆盖。＆＃34;链接）

SVG Resource

Answer 2

您可以使用样式属性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>

如何在单击按钮时使用JavaScript隐藏SVG元素？

2 个答案: