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="http://www.w3.org/2000/svg" 
version="1.1" viewBox="0 0 100 100">
<defs>
 <pattern id="img8" height="100" width="100" patternUnits="userSpaceOnUse">
  <image preserverAspectRatio="none" height="100%" width="200%" x="-25"
 xlink:href="images/my-store.gif">
 </pattern>
</defs>
<polygon style="stroke: #999DA3;" fill="url(#img8)" 
points="50 1 95 25 95 75 50 99 5 75 5 25">
</svg> 
</a>

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?

Thanks

回答1:

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

<svg>
    <defs>
        <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
            <image height="1" width="1" preserveAspectRatio="none" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Gl%C3%BChwendel_brennt_durch.jpg/399px-Gl%C3%BChwendel_brennt_durch.jpg" />
        </pattern>
    </defs>

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

来源：https://stackoverflow.com/questions/36659710/image-to-fill-a-polygonal-svg-shape

标签

html

css

svg