Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts

    svg object not sizing right in Safari 4, 5

    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 in Safari 4, there is also a white background obscuring the underlying div.

    Any thoughts? Every other browser is lining up perfectly

    Right now, my svg file is like this:
    Code:
        <?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
    Code:
        <!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>
    Last edited by Alex Vincent; 04-10-2013 at 05:49 PM. Reason: adding code tags


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •