Maybe this is a dumb question, but now that I'm getting the idea on the svg itself, I want to be able to make a clicked item affect elements outside of the svg object. In this instance, I want to make a div appear , or better yet innerhtml write to a div that is on the page. So far, I haven't had any luck?

This simple approach didn't work... ( I also tried calling a function() outside the svg and it still didn't work? )
<svg xmlns="" version="1.1"
      width="50" height="160" viewBox="0 0 236 120">
      <style type="text/css" media="screen">
     .overlay1 {opacity:0;}
	.overlay1:hover { opacity:1;}
      <g class="overlay1"
onclick="document.getElementById('option1').style.opacity = '1';">

      	<path d="M0,0 50,0 50,120 0,120" style="fill:#97aa2b;" />
<text x="14" y="75" font-family="Verdana" font-size="25" fill="white" 
      	> 01 </text>

the html:

<div id="option1" style="opacity:0;">
			Content here here here

<div style="height:0px;overflow:visible;z-index:100;">
<object id="g01" data="file/file.svg" width="100" height="100" type="image/svg+xml" codebase=""></object>