Filling an SVG polygon with an image

Asked Oct 08 '14 at 09:59

Active Oct 08 '14 at 09:59

Viewed 323 times

I am trying to fill an svg polygon with an image and cannot seem to work out how to do it.

<svg xmlns="http://www.w3.org/2000/svg" width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1">
    <polygon style="fill:url(image.jpg)" stroke="blue" stroke-width="10" points="850,75  958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
</svg>

I have tried this as well as:

<svg xmlns="http://www.w3.org/2000/svg" width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1">
    <polygon stroke="blue" stroke-width="10" points="850,75  958,137.5 958,262.5 850,325 742,262.6 742,137.5">
       <image xlink:href="<?php echo $image ?>" width="200" height="300" />
    </polygon>
</svg>

Any help would be much appreciated.

asked Oct 08 '14 at 09:59

Lee Proctor

Please see [here](http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) – Gilsha Oct 08 '14 at 10:10
I have attempted this with no luck, the shape I am trying to create is a hexagon – Lee Proctor Oct 08 '14 at 10:22

Filling an SVG polygon with an image

0 Answers0