Manipulating visibility of SVG elements

Question

I'm making a Java web project, where I want to manipulate some front-end SVG-elements with some javascript.

I'm making a fairly simple drawing of a garage, where I have a shed element coming from a JSP page.

I would like a javascript function, on/off button, where the element can be displayed and not hidden.

Here is my code so far:

....
  


//this is the start of the part that I want to be toggled on and off with a javascript function
<% if(shed){ %>









  Skur: 200.0 cm 

  

<% } %>



    
    
    
    

      <%@include file="footer.jsp" %>

I'm using an if Statement to show with or without shed in my jsp, but can a click button be used for displaying it after the page is rendered

I was thinking of something like this.

function myFunction() {

var SVGcode ="//insert html code here";

document.getElementById("demo").innerHTML = SVGcode;
}

the problem is that the SVG-code is too much, so I don't know what to do here

EDIT:

here is a picture of how it is desired to look, so far I just have a function that writes Hello, when the button is pressed, but I desired to have a toggle-on button, that adds the additional SVG-code

Ivan · Accepted Answer

Toggle visibility of a given element

You would like to have a function to hide and display some parts of a SVG element. The method I use actually work for any given HTML element (of object HTMLElement). You need to:

give the elements you would like to hide/display a class name, for instance:

write a function to toggle the visibility of a given element:

we will create a function hide() to hide an HTMLElement
```
const hide = e => e.style.display = 'none'
```
and a show() function to show it...
```
const show = e => e.style.display = ''
```

finally, the function to handle the toggle:

const toggleHide = function(selector) {
  [...document.querySelectorAll(selector)].forEach(e => e.style.display ? show(e) : hide(e))
}

Lastly a trigger to call the function, we can use a button:
Set the function to call in the onclick attribute of the button and give it as argument the selector (here .frame) of the element you want to link it to. I.E. this button will toggle the visibility of all elements with the class name .frame.

Demo with your `svg` drawing

In the demo below, I have added two buttons linked to two groups of svg elements. Click Show code snippet > Run code snippet > Full page to preview:

const hide = e => e.style.display = 'none'
const show = e => e.style.display = ''
const toggleHide = function(selector) {
  [...document.querySelectorAll(selector)].forEach(e => e.style.display ? show(e) : hide(e))
}




  

  click on the buttons to remove some parts of the shed

Manipulating visibility of SVG elements

Answers (1)

Toggle visibility of a given element

Demo with your `svg` drawing

Related Questions

Manipulating visibility of SVG elements

Answers (1)

Toggle visibility of a given element

Demo with your svg drawing

Related Questions

Demo with your `svg` drawing