SVG graphic doesn't display properly on Canvas Pinball HTML5 demo

RESOLVED DUPLICATE of bug 614649

Status

()

Core
SVG
RESOLVED DUPLICATE of bug 614649
6 years ago
6 years ago

People

(Reporter: geeknik, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

6 years ago
User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b11pre) Gecko/20110131 Firefox/4.0b11pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b11pre) Gecko/20110131 Firefox/4.0b11pre

The arrow keys SVG graphic on the Canvas Pinball HTML5 demo don't display properly with Minefield. 

Not displayed correctly in Minefield:
http://i.imgur.com/Ea9xf.png

Displayed correctly in Chrome:
http://i.imgur.com/vRTlb.png

Code responsible:
<p>To play, use the arrow keys <span class="GiantFont">(<span id="arrowKeys"><img width="75" height="56" src="assets/aarowkeys.svg"></span>)</span>. Left and right operate the flippers, and the down arrow key operates the launcher.</p>

Reproducible: Always
(In reply to comment #0)
> <img width="75" height="56"
> src="assets/aarowkeys.svg">

From the SVG:
 <svg width="100" height="75" xmlns="http://www.w3.org/2000/svg">

This is an instance of bug 614649 (i.e. NOTABUG, but an difference in behavior between us & chrome/opera).

In short: the <svg> node needs to add viewBox="0 0 100 75" to tell the browser (a) that it wants a region scaled to fit a viewport and (b) what that region is.

Absent a viewBox, we just present the (cropped-to-75px-by-56px) upper-right corner of SVG-space, at 100% zoomlevel.  See the other bug for more.
Status: NEW → RESOLVED
Last Resolved: 6 years ago
OS: Windows 7 → All
Hardware: x86_64 → All
Resolution: --- → DUPLICATE
Version: unspecified → Trunk
Duplicate of bug: 614649
(In reply to comment #1)
> From the SVG:
>  <svg width="100" height="75" xmlns="http://www.w3.org/2000/svg">

For the record, the "aarowkeys.svg" used in this demo has now changed (on Microsoft's web site) to:
> <svg width="100" height="75" viewBox="0 0 100 75" xmlns="http://www.w3.org/2000/svg">
so this demo should now work in older Firefox 4 beta versions and nightlies, from before bug 614649 was fixed.

Per today's messages to www-svg[1], IE9 RC apparently changed (with respect to their beta) to match the behavior that mozilla-central had up until a few days ago (until bug 614649 landed):
http://lists.w3.org/Archives/Public/www-svg/2011Feb/0046.html
(for reference, aarowkeys.svg is located at
http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/assets/aarowkeys.svg
)
You need to log in before you can comment on or make changes to this bug.