How to fill a polygon with an image?

Question

I tried putting an image inside a polygon by using patterns, but it doesn't work. Is there any way to fill this?

<svg tabindex="1" style="width: 175px; height: 216.506px;">

  <polygon points="25,0 75,0 100,43 75,86 25,86 0,43" class="hexfield" tabindex="1" hex-row="0" hex-column="0"></polygon>
  <polygon points="100,44 150,44 175,87 150,130 100,130 75,87" class="hexfield" tabindex="1" hex-row="0" hex-column="1"></polygon>
  <polygon points="25,87 75,87 100,130 75,173 25,173 0,130" class="hexfield" tabindex="1" hex-row="1" hex-column="0"></polygon>
  <polygon points="100,130 150,130 175,173 150,216 100,216 75,173" class="hexfield" tabindex="1" hex-row="1" hex-column="1"></polygon>

  <defs>
    <pattern id="image1" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 64 64">
      <image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"></image>
    </pattern>
  </defs>
  
  <use xlink:href=".hexfield" fill="yellow"/>
  <use xlink:href=".hexfield" fill="url(#image1)"/>

</svg>

dup of https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image ? — sheriffderek, Apr 13 '19 at 21:05
I used their answer but it doesn't work for these polygons, which I don't understand why. — Cloud9c, Apr 13 '19 at 21:07

mugga · Accepted Answer · 2019-04-15T03:31:34.900

First of all, be aware that xlink:href is deprecated.

Second, xlink:href value doesn't use CSS syntax (where # means ID and . means class).

So, for referring to a group of SVG's, you should point xlink:href to the id of a tag <g>. But If you want that only one SVG gets the definitions, point xlink:href to the SVG id (not class):

<svg tabindex="1" style="width: 175px; height: 216.506px;">

<g id="hexfield">
  <polygon points="25,0 75,0 100,43 75,86 25,86 0,43"/>
  <polygon points="100,44 150,44 175,87 150,130 100,130 75,87"/>
  <polygon points="25,87 75,87 100,130 75,173 25,173 0,130" id="another"/>
  <polygon points="100,130 150,130 175,173 150,216 100,216 75,173"/>
</g>

  <defs>
    <pattern id="image1" height="100%" width="100%" viewBox="0 0 64 64">
      <image width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"/>
    </pattern>
    <pattern id="image2" height="100%" width="100%" viewBox="0 0 64 64">
      <image width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/iPhoto.png"/>
    </pattern>
  </defs>
  
  <use xlink:href="#hexfield" fill="yellow"/>
  <use xlink:href="#hexfield" fill="url(#image1)"/>

  <use xlink:href="#another" fill="red"/>
  <use xlink:href="#another" fill="url(#image2)"/>

</svg>

Is it possible for just one SVG to get the image / yellow background? I tried wrapping only one with tags, but it makes the polygon disappear. — Cloud9c, Apr 13 '19 at 22:01
No, `xlink:href` doesn't follow CSS syntax, it points to the URL (that accepts # like anchors) — mugga, Apr 15 '19 at 20:34
So I would have to create a new use / pattern if I wanted to make multiple image patterns using javascript? — Cloud9c, Apr 15 '19 at 20:39

How to fill a polygon with an image?

1 Answers1