Why is this SVG image not displaying properly in Chrome or Firefox? It displays as expected in IE 9. I tested this in Firefox 5 and 6 and Chrome 13, 14, and 15–all on Windows. I'll test Linux and ChromeOS when I get home.
The image is supposed to look like:
I am only seeing the red county, and nothing else. It may have something to do with the viewport:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="6416.0" height="9720.0"
viewBox="-1856,-3363 6416,9720">...
As a note, I get this behavior for all county map SVG images on Wikipedia, but not necessarily other SVG images on Wikipedia.
Best Answer
Not sure what changed, but Chromium 14 & Opera 11.50 agree with current Firefox rendering (giant canvas, showing just the red country), so I'm guessing the new behavior is "correct" given the markup.
edit: Ok, I've traced this back to the nightly changeset-range on Firefox development trunk. The behavior-change was due to the top change there, for bug 547062, and the new behavior appears to be correct & as intended. See the first comment on that bug --
<clipPath>
is restricted to only contain certain elements, and<g>
is not included in that list. So the testcase has invalid markup.Mechanical snail's linked validator agrees with the above -- it says:
document type does not allow element "g" here
.