CODEWITHSUNDEEP
javascripthtmlcsssvg
Richard Edwards
Richard Edwards

Reputation: 2060

SVG polygon fill with image not working

I had this working previously, but for some reason my Patterns do not seem to be working whatsoever.

I have tried all ways to get this working, and it works perfectly fine with solid colour, but when I try and use a Pattern it simply goes transparent.

I even started fresh with a new SVG pattern sample, and it still didnt work either.

SVG Code 

<svg width="100" height="100">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
</svg>

This just shows a transparent circle. everything here is right as far as i am aware, and there is no CSS effecting 'image' 'pattern' or 'circle' elements.

Issue in both chrome + firefox, so pretty sure its a code issue or something else on the page.

Trying to get it working here: http://www.slidingwardrobesexpress.co.uk/index.php?dispatch=wardrobe_tool.step1

The first wardrobe door should be filled with a dark red image.

Any ideas? I cant find any other mention of SVG patterns getting no fill when given a pattern to fill with.

My actual live code is:

<defs>
 <pattern id="img-lacobel_darkred"  patternUnits="userSpaceOnUse" width="50" height="50" ><image xlink:href="/{$img_path}/lacobel_aluminiumrich.jpg" x="0" y="0" /></pattern>
</defs>
<polygon class="svgDoor1 D1S1" id="D1S1P1" points="8,12 131,41 131,415 8,428" fill="url(#img-lacobel_darkred)" style="stroke:black;stroke-width:1"  />

Upvotes: 1

Views: 2272

Answers (1)

Robert Longson
Robert Longson

Reputation: 124029

Your actual live code is lacking width and height attributes on the <image> elements. In SVG 1.1 these default (rather unhelpfully) to 0.

You're also using a <base> tag which is an excellent way of breaking all the references as the base is prepended to all the fragment identifiers aka those # symbols. Removing the <base> tag makes your testcase work on your site. There are other solutions such as making all the URLs absolute if you really need the <base> tag to be there.

Upvotes: 3

Related Questions