Muhammad Muhammad - 1 year ago 66
HTML Question

Image to fill a polygonal SVG shape

I know this topic has been posted before, but please read through before marking duplicate.

This is a 2 part question.

I am trying to fill a hexagonal SVG shape with an image. What I want is for the image to fully cover the hexagonal area, whether it has to stretch or compress it self in order to do so. So far, I have only been able to accomplish this with a fixed width image, and that too, having some kind of padding around its sides.

I have searched for this on other questions, but first off, they are not hexagons, secondly, the code provided in them does not help in filling the hexagon completely. Here is my code and snapshot.

<a href="/bhive/business/index/8">
<svg style="width:117px;height:97px;" xmlns="" version="1.1" viewBox="0 0 100 100">
<pattern id="img8" height="100" width="100" patternUnits="userSpaceOnUse">
<image preserverAspectRatio="none" height="100%" width="200%" x="-25" xlink:href="images/my-store.gif">
<polygon style="stroke: #999DA3;" fill="url(#img8)" points="50 1 95 25 95 75 50 99 5 75 5 25">


Snapshot of the hexagon

The second part is, that I want this hexagon to be responsive. How can I make it responsive, such that it resizes according to the browser window?


Answer Source

First of all remove height, width and x attribute from image tag. Set 100% height and width in pattern and patternContentUnits="objectBoundingBox".

        <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" preserveAspectRatio="none" xlink:href="" />

    <polygon style="stroke: #999DA3;" fill="url(#pattern1)" points="50 1 95 25 95 75 50 99 5 75 5 25"/>