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

Question

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

svgElement.style.display = "none";

但它不起作用.怎么可能这样做getElementById？

Answer 1

使用SVG可见性属性.

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

visibility属性使您可以控制图形元素的可见性.使用隐藏或折叠值时,当前图形元素是不可见的[update]但是display:none; 和不透明度:0也可以.

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

能见度,

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

但是急于使用显示并不总是最好的,因为我们可以通过可见性更好地控制元素.(即"如果您试图隐藏整个组,除了该组的一个特定成员,请使用'可见性',因为它在继承中是可覆盖的."链接)

SVG资源

Answer 2

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