CODEWITHSUNDEEP
svgfill
gsaielli
gsaielli

Reputation: 23

SVG pattern with image not working in IE 10 and Firefox

This html+svg page (no javascript) does not work on IE+Firefox, while it works on all other browsers (Chrome, Safari and Opera).

<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="graphics" style="overflow: hidden; position: relative;">
    <defs>
        <pattern id="A" patternUnits="objectBoundingBox" width="80" height="27">
            <image xlink:href="Data/Dialoghi/tl/PN.3000994/A/1.png" width="80" height="27"></image>
        </pattern>

... 7 more patterns

    </defs>
    <path fill="url(#A)" d="M31.20418,1.17813L39.54938,1.17813L39.54938,81.79142999999999L11.964579999999998,81.79142999999999C13.448279999999999,68.15012999999999,16.862979999999997,54.26062999999999,21.96358,41.51922999999999C26.683880000000002,28.519329999999993,29.80658,14.937729999999995,31.20418,1.178129999999996Z"></path>

... 150 more paths or rects

The page works everywhere only if I keep the number of figures below 30-40; at some point after that, it stops rendering the page at all, showing only white space on IE 10 and crashing Firefox (all other browsers work great).

What do I miss? How do you debug a case like this?

Thank you very much.

Upvotes: 1

Views: 1892

Answers (1)

Robert Longson
Robert Longson

Reputation: 124219

You've specified patternUnits="objectBoundingBox" so a value of 1 for width and height is the size of the shape. So you're creating patterns that are 80 or so times the size of the shape that you're drawing the pattern into like creating a pattern the size of Britain in order to draw London.

Either make the pattern width and height sensible (i.e. <= 1) or use userSpaceOnUse units

Upvotes: 3

Related Questions