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? )
Code:
<svg xmlns="http://www.w3.org/2000/svg" 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;}
	</style>
           
      <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>
      </g>

</svg>
the html:

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

<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="http://www.savarese.com/software/svgplugin/"></object> 
				
						
		</div>