Member Avatar for turpentyne

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>
  • 2 Contributors
  • 1 Reply
  • 164 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

The alignment is off, and there's a horizontal scrollbar.

Is it on a desktop, laptop or mobile device?

Can you post an image of it.

So we can see the code and the image at the same time.

Then see any solutions.

So far I read online about it's a bug dealing with SVG and Safari & Chrome.

The only solution is to work around with it.

Edited by LastMitch because: grammer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.