Why is this background image not working for this SVG?

Question

I want to create this triangular/polygonal shape using SVGs and assign it a background image.

    <svg class="svg-graphic" width="100%" height="100%" class="svg-graphic" viewBox="0 0 100 100" >
        <defs>
            <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
              <image x="0" y="0" xlink:href="http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg"></image>
            </pattern>
        <polygon points="0, 0, 100, 0, 50, 50" fill="url('http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg')"/>
        </defs>
    </svg>

Very similar to this question here:

Happy Chanukkah

Boldewyn · Answer 1 · 2013-12-03T16:43:00.370

0

The fill attribute references the pattern, in your case it's url(#image) (like you'd do in CSS). Repeating the image's URL is pointless there. See the accepted answer in the question you linked to.

Apart from that you must make sure, that the view box spanned by the <pattern> actually matches the shape it shall be applied to. See this updated fiddle: http://jsfiddle.net/boldewyn/k7Rk9/12/

edited Dec 03 '13 at 16:43

answered Dec 03 '13 at 16:15

Boldewyn

81,211
44
156
212

It should be left as fill="url(#image)"? – Joe Isaacson Dec 03 '13 at 16:18
And moved out of the `` element, yes. Content of `` is invisible, like HTML's ``. You had that correct, when I wrote the answer. – Boldewyn Dec 03 '13 at 16:18
Yeah that's not working - and now that I double check, neither is the answer to the question I referenced. http://jsfiddle.net/k7Rk9/11/ – Joe Isaacson Dec 03 '13 at 16:30

score 0 · Answer 2 · answered Dec 03 '13 at 16:42

0

The problem is the fill="#url"

you have to give the polygon/path a class and then from that class, assign the background image (that's already defined in the defs):

    .imageFill {
      fill: url(#image);
    }

answered Dec 03 '13 at 16:42

Joe Isaacson

4,012
6
30
40

Nope. Both are equivalent, if you use the right syntax for the `fill` attribute: `fill="url(#image)"`. That is, CSS will overwrite the attribute, if both are present, but otherwise they're the same. – Boldewyn Dec 03 '13 at 16:44

Why is this background image not working for this SVG?

2 Answers2