svg not following css width and height values properly under linux

GoogleCodeExporter commented 8 years ago

What steps will reproduce the problem?
1. Open http://www.sitepoint.com/examples/svg/thewall.html in Chrome 
17.0.963.79 on Ubuntu

What is the expected output? What do you see instead?

Expected: The .svg overlay should expand to fill the screen

Actual: The .svg fills the screen vertically, but remains square.

What version of the product are you using? On what operating system?

Chrome 17.0.963.79 on Pinguy Eee, based on Ubuntu 10.04

Please provide any additional information below.

This site seems to work under Chrome for Windows.

Original issue reported on code.google.com by Steve.Le...@gmail.com on 21 Mar 2012 at 4:56

GoogleCodeExporter commented 8 years ago

This page uses neither SVG, nor SVGPan.  The issue should be removed.

Original comment by rdu...@mcmillan-mcgee.com on 2 Oct 2012 at 3:22

GoogleCodeExporter commented 8 years ago

What?

This site DOES use .svg.

Specifically, the background spotlight is an .svg image named (you guessed it) 
spotlight.svg (go figure).

An .svg image is simply a text file (just like including .css) which is 
interpreted by the .svg interpreter in the browser... that's how any .svg image 
displays, whether the text which describes the image is included in the main 
.html file, or imported (as here) externally.

The direct link to this .svg image is 
http://www.sitepoint.com/examples/svg/spotlight.svg

Open that image in a tab all by itself, and 'View Source'.  You will see the 
following code:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <radialGradient fy="0.11328" fx="0.11328" r="0.5" cy="0.53906" cx="0.5" id="svg_4">
   <stop stop-opacity="0" stop-color="#000000" offset="0"/>
   <stop stop-color="#0e0938" offset="1"/>
  </radialGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <rect fill-opacity="0.8" id="svg_1" width="640" height="480" y="0" x="0" fill="url(#svg_4)"/>
 </g>
</svg>

Here are the lines in the .html that use this image as one of two background 
images, and scales it to 100% of its parent DOM element:

                background:url(spotlight.svg), url(seamless-brick.jpg) ;
                background-size:100% 100%, auto;

Try opening the reference site using FireFox to display the page as standards 
insist.

The issue stands.

Original comment by Steve.Le...@gmail.com on 2 Oct 2012 at 10:34

gerbenv / svgpan

svg not following css width and height values properly under linux #17