Buttons inside an SVG to show a div

Question

I really need some help here, I am starting to work with svg files and it is driving me crazy!

Y created a complex SVG file with some animations and inserted it as an in an HTML file... What I need is to click a button from the SVG and make a couple of divs in the HTML to display accordingly.

I don't know how to assign this action to each button since the SVG is external from the HTML.

Can someone help me, please? I uploaded a simplified example here: http://doctordiseno.com/svghelp/

PS: Pasting the SVG code inline is not an option since, as I mentioned, it is very complex and I would like to keep my HTML as clean as possible.

Firstly, that SVG could easily be recreated with just HTML, CSS and animations. But to answer your question, have you considered just binding JavaScript click event listeners to each of the numbered circles? — fubar, Sep 05 '17 at 01:15
Hi @fubar, thanks for your fast answer... As I mentioned, the SVG that I am showing is just a basic example of what I need to achieve, my real SVG uses A LOT MORE code... About your suggestion, I know it must be something to be done with JS, but I don't know how :( — DoctorDiseno, Sep 05 '17 at 01:18
If what you have posted isn't a representative example of the problem you face, I'm not sure how anyone can give you specific help. As for using JavaScript, this is an event listener. `document.getElementById('punto1').addEventListener('click', function (event) { console.log('do something'); });` — fubar, Sep 05 '17 at 01:24
And the _amount_ of code in your SVG doesn't matter. You still only need to target the clickable elements with a specific class or id, to which you can bind an event listener. — fubar, Sep 05 '17 at 01:26
And about the code you suggest, I am really a newbie at JavaScript, that's why I ask the experts, I really don't know how (NOR WHERE!) to insert the listeners. I don't know if it has to be done inside the SVG or inside the HTML, I also don't know how to specify the "do something" placeholder you used to display my lower divs. Sorry for being SO newbie, I hope you can help. Thanks! — DoctorDiseno, Sep 05 '17 at 01:40
ALso, the SVG code I used is exactly a representative of the problem! Thanks again — DoctorDiseno, Sep 05 '17 at 01:41
Include your JavaScript at the bottom of your page in a `` block. And there are loads of examples for showing and hiding `div`s on StackOverflow. Have a go and come back with a JSFiddle example when you have problems. https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript — fubar, Sep 05 '17 at 02:10

score 1 · Accepted Answer · answered Sep 05 '17 at 10:03

Using an <object> complicates things. It would be a lot simpler to inline the SVG in your HTML.

// Add a click event to button "1"

document.getElementById("punto1").addEventListener("click", function() {
  showContent("theme1");
});

document.getElementById("punto2").addEventListener("click", function() {
  showContent("theme2");
});

document.getElementById("punto3").addEventListener("click", function() {
  showContent("theme3");
});

document.getElementById("punto4").addEventListener("click", function() {
  showContent("theme4");
});

function showContent(contentId) {
  // Hide all the "theme" divs, and show only the one we want.
  document.getElementById("theme1").style.display = 'none';
  document.getElementById("theme2").style.display = 'none';
  document.getElementById("theme3").style.display = 'none';
  document.getElementById("theme4").style.display = 'none';

  document.getElementById(contentId).style.display = 'block';
}

.content {
 width: 47%;
 height: 60px;
 background-color: aliceblue;
 border: solid #fff;
 padding: 10px;
 text-align: center;
 float: left;
}

<svg id="Layer_1" viewBox="0 0 600 100">
<style type="text/css">
 .st0{fill:#00A79D;}
 .st1{fill:#FFB700;}
 .st2{fill:#FFFFFF;}
</style>
<rect class="st0" width="600" height="100"/>
<g id="punto1"  class="puntos">
 <g>
  <path class="st1" d="M70,88.4c-21.2,0-38.4-17.2-38.4-38.4S48.8,11.6,70,11.6s38.4,17.2,38.4,38.4S91.2,88.4,70,88.4z"/>
  <path class="st2" d="M70,13c20.4,0,37,16.6,37,37S90.4,87,70,87S33,70.4,33,50S49.6,13,70,13 M70,10.2C48,10.2,30.2,28,30.2,50
   S48,89.8,70,89.8S109.8,72,109.8,50S92,10.2,70,10.2L70,10.2z"/>
 </g>
 <g>
  <path d="M63.7,30.1c3.2,0,4.1-0.6,4.1-3h7.1v44.5h-7.7v-34h-3.5V30.1z"/>
 </g>
</g>
<g id="punto2"  class="puntos">
 <g>
  <path class="st1" d="M223.3,88.4c-21.2,0-38.4-17.2-38.4-38.4s17.2-38.4,38.4-38.4s38.4,17.2,38.4,38.4S244.5,88.4,223.3,88.4z"/>
  <path class="st2" d="M223.3,13c20.4,0,37,16.6,37,37s-16.6,37-37,37s-37-16.6-37-37S202.9,13,223.3,13 M223.3,10.2
   c-22,0-39.8,17.9-39.8,39.8s17.9,39.8,39.8,39.8S263.2,72,263.2,50S245.3,10.2,223.3,10.2L223.3,10.2z"/>
 </g>
 <g>
  <path d="M232.9,71.6h-20v-6.1c0-12.6,12.6-22.1,12.6-29c0-1.9-1.1-2.5-2.5-2.5c-1.4,0-2.5,0.6-2.5,3H213c0-6.2,4.2-10.3,10.1-10.3
   c6,0,10.2,4,10.2,9.7c0,9.6-12.5,20.1-12.5,27.7h12.2V71.6z"/>
 </g>
</g>
<g id="punto3" class="puntos">
 <g>
  <path class="st1" d="M376.7,88.4c-21.2,0-38.4-17.2-38.4-38.4s17.2-38.4,38.4-38.4s38.4,17.2,38.4,38.4S397.8,88.4,376.7,88.4z"/>
  <path class="st2" d="M376.7,13c20.4,0,37,16.6,37,37s-16.6,37-37,37c-20.4,0-37-16.6-37-37S356.2,13,376.7,13 M376.7,10.2
   c-22,0-39.8,17.9-39.8,39.8s17.9,39.8,39.8,39.8S416.5,72,416.5,50S398.6,10.2,376.7,10.2L376.7,10.2z"/>
 </g>
 <g>
  <path d="M378.6,42.7v-5.7c0-2.4-1.3-3-2.5-3c-1.2,0-2.5,0.6-2.5,3h-7.6c0-6,4.2-10.4,10.3-10.4c6.6,0,10.3,4.4,10.3,10.8v3
   c0,3.9-0.9,7.5-4.3,8.9c3.4,1.4,4.3,4,4.3,8.9v3.1c0,6.3-3.8,10.7-10.3,10.7c-6.1,0-10.5-4.2-10.5-10.7h7.7c0,2.6,1.6,3.1,2.8,3.1
   c1.1,0,2.6-0.4,2.6-3v-6.2c0-2.6-1.3-3-2.5-3c-1.3,0-3.7,0-3.7,0v-6.7c0,0,2.2,0,3.4,0S378.6,45.4,378.6,42.7z"/>
 </g>
</g>
<g id="punto4" class="puntos">
 <g>
  <path class="st1" d="M530,88.4c-21.2,0-38.4-17.2-38.4-38.4s17.2-38.4,38.4-38.4s38.4,17.2,38.4,38.4S551.2,88.4,530,88.4z"/>
  <path class="st2" d="M530,13c20.4,0,37,16.6,37,37s-16.6,37-37,37c-20.4,0-37-16.6-37-37S509.6,13,530,13 M530,10.2
   c-22,0-39.8,17.9-39.8,39.8S508,89.8,530,89.8S569.8,72,569.8,50S552,10.2,530,10.2L530,10.2z"/>
 </g>
 <g>
  <path d="M538,54.3h2.7v7.1H538v10.2h-7.5V61.4h-11.7v-7.1l11.7-27.2h7.5V54.3z M530.5,54.3V41.9l-4.9,12.3H530.5z"/>
 </g>
</g>
</svg>

<div id="theme1">
  <div class="content">Content 1</div>
  <div class="content">Content 1B</div>
</div>
<div id="theme2" style="display:none">
  <div class="content">Content 2</div>
  <div class="content">Content 2B</div>
</div>
<div id="theme3" style="display:none">
  <div class="content">Content 3</div>
  <div class="content">Content 3B</div>
</div>
<div id="theme4" style="display:none">
  <div class="content">Content 4</div>
  <div class="content">Content 4B</div>
</div>

Thanks Paul! This works perfect! You can see it at http://emprendetours.cetstrategy.mx/ As you may notice I could have simplified somehow these functions since they are identical, instead of using one for each ID... I am a total newbie at JS :( But it works thanks to your help! Cheers! — DoctorDiseno, Sep 14 '17 at 22:58

Buttons inside an SVG to show a div

1 Answers1