I have a set of rollover areas in an svg file, laid over a background image on the page.
It works in just about every latest browser, but I have an issue on Safari 5.1. The alignment is off, and there's a horizontal scrollbar. The viewBox seems the right side, but everything inside is larger. An extra issue is that Safari 4, there is also a white background obscuring the underlying div.
Any thoughts?
Right now, my svg file is like this:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="550" height="250" viewBox="0 0 550 250">
<style type="text/css" media="screen">
.overlay1 { opacity:0;}
.overlay1:hover { opacity:1; }
</style>
<g class="overlay1"
onmouseover="top.showit('option1');">
<path d="M0,-61 45,-61 45,11 0,11" style="fill:#97aa2b;" />
<text x="12" y="-7" font-family="Verdana" font-size="17" fill="white"
> 01 </text>
</g>
<g class="overlay1"
onmouseover="top.showit('option2')">
<path d="M45,-61 81,-61 81,11 45,11" style="fill:#97aa2b;" />
<text x="49" y="-7" font-family="Verdana" font-size="17" fill="white"
> 02 </text>
</g>
<g class="overlay1"
onmouseover="top.showit('option3')">
<path d="M81,-61 118,-61 118,11 81,11" style="fill:#97aa2b;" />
<text x="88" y="-7" font-family="Verdana" font-size="17" fill="white"
> 03 </text>
</g>
<g class="overlay1"
onmouseover="top.showit('option4')">
<path d="M118,-61 153,-61 153,11 118,11" style="fill:#97aa2b;" />
<text x="124" y="-7" font-family="Verdana" font-size="17" fill="white"
> 04 </text>
</g>
<!-- several other similar grouped rollovers here -->
</svg>
And the html here, with the object on the page
<!DOCTYPE html>
<html>
<div style="float:right;border-left: 1px solid black;height:334px;width:555px;position:relative;top:-43px;padding:10px;">
<!-- this div contains the floorplans at right -->
<div id="unit_rollovers" style="height:0px;overflow:visible;z-index:100;">
<object id="g01" style="position:relative;left:71px;height:300px; width:400px;display:block;" data="http://www.thewalshgroup.ca/dev/highpark/inc/floorplans/floorplan_rolls.svg" type="image/svg+xml" codebase="http://www.savarese.com/software/svgplugin/"></object>
</div>
<!-- now, the underlaid images-->
<div id="map1" style="float:left;width:280px;">
<img src="inc/floorplans/images/L2_background.png">
</div>
<div id="map2" style="float:left;width:200px;">
<img src="inc/floorplans/images/L3_background.png">
</div>
</div>
</html>