CODEWITHSUNDEEP
svgpolygonfillleaflet
ghelobytes
ghelobytes

Reputation: 21

How to fill Leaflet polygon with image?

I tried to modify Leaflet's Path.SVG.js so that it will produce the following SVG markup.

<svg class=" leaflet-zoom-animated" width="2698" height="318" viewBox="-995 12 2698 318" style="-webkit-transform: translate3d(-995px, 12px, 0);">
<defs>
    <pattern id="rank1" x="0" y="0" height="28pt" width="28pt" patternUnits="userSpaceOnUse">
        <image xlink:href="https://googledrive.com/host/0B9FPQIuJQjY3eTlWMFZBWUxiY1E/pattern5.png" height="28pt" width="28pt">
        </image>
    </pattern>
</defs>
<g>
    <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#f03" stroke-opacity="0.7" stroke-width="5" fill="url(#rank1)" class="leaflet-clickable" d="M558,85A42,42,0,1,1,557.9,85 z">
    </path>
</g>
<g>
    <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="url(#rank1)" class="leaflet-clickable" d="M733 118L849 174L925 108z">
    </path>
</g>

The goal here is to render a polygon filled with image pattern. Using Chrome's element inspector, I then copied & pasted the SVG markup produced and pasted it in the body element of the page. I reload the page and got the following result:

Link to screen shot (Sorry, I have < 10 reputations at the moment)

Notice that the polygon in the map did not have any graphics fill but I am 100% sure they are the same markup because I simply copy-pasted the polygons at the bottom from the markup produced by Leaflet.

Any ideas why the fill graphics won't render in the polygon inside the map?

Upvotes: 2

Views: 3327

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

A few points:

  • SVG doesn't understand most CSS units. You need to get rid of the "pt" inside your SVG element.
  • You're not closing your SVG element
  • The reference to your image 404's for me

When I fix these problems and use a working image URL, it works fine.

Upvotes: 1

Related Questions