367204 - Embedded SVG clips based on viewport size

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Martin Thomson]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

When embedding SVG images in a page, the resulting image clips strangely.  The SVG image clips to a rectangle of the same size as a viewport.  This starts from the 0,0 coordinates that the SVG element inherits from its positioning on the page.

Changing the size of the viewport also changes the size of the SVG image, which makes things worse.

Reproducible: Always

Steps to Reproduce:
1.Create a page containing embedded SVG graphics.
2.Resize the browser window until the viewport is smaller than the SVG graphic.

Actual Results:  
The SVG graphic is clipped to the viewport size, irrespective of any page context.

Expected Results:  
The SVG graphic should be clipped to the size of its containing block, not the viewport size, which is irrelevant for embedded graphics.  If the <svg> element is given a size (either through width/height attributes, CSS or the enclosing block size), that should be the size that the image is constrained to.

I discovered this when drawing SVG overlays on Google Maps.  Google Maps often uses negative coordinates for images as it scrolls around, however, overlaid SVG images do not draw in negative coordinates.  The positive coordinates that they draw to are limited by the size of the viewport.

Comment 1

[Martin Thomson]

Attachment: SVG Clipping Demonstration

Shrink the window to demonstrate the bug.

Comment 2

[Martin Thomson]

Attachment created.  Observe the difference between Firefox and Opera in rendering this page.

I just found Bug 288276, the solution to which might address this problem.

Comment 3

[Jonathan Watt [:jwatt]]

Fixed by the fix for bug 294086.