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.

Answer 1

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>