How to make an image pattern fill the bounds of svg polygon, but would not stretch (the quality) of the image when resizing?

Question

I'm new in svg. I created a polygon and filled it up to its bounds with an image. But the image is stretched and stretches when the window is resized. Here's my code:

<svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none">
                <defs>
                    <pattern id="polygon_image_1" width="1" height="1"  patternUnits="objectBoundingBox">                
                         <image x="0" y="0" width="100" height="100"  preserveAspectRatio="none" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA-ujgnduv6enQGA4LvB_UV_w3hDrZjWp20KeB-2B1dyEmToVMvSfvGWk"></image>
                    </pattern>                        
                </defs>      

                <polygon points="0,0, 100,0 100,15  50,55 0,15"  fill="url(#polygon_image_1)" <?php></polygon> 
</svg>

Here's a sample run of the code: http://jsfiddle.net/dLsduaq2/

The sample image is small (on purpose) to show that it really stretches the image.

What I am trying to achieve is something like this please see link>>"jonom.github.io/jquery-focuspoint/demos/grid/dolphin.html" using svg alone or other supplementary codes.

I cant use the jquery focus point because this is how it is used:

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
    <img src="image.jpg" alt="" />
</div>

and because what i need to work on is under the svg tag.

Is my goal possible with svg? Please help.

score 1 · Answer 1 · answered Nov 06 '14 at 16:34

You are setting the pattern size to 100% of the containing element and then setting the image size to 100 px. Set your pattern to 10% and your image size to 10px and you'll get something closer to what you want.

<pattern id="polygon_image_1" width=".1" height=".1"  patternUnits="objectBoundingBox">              
    <image x="0" y="0" width="10" height="10"  preserveAspectRatio="none" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA-ujgnduv6enQGA4LvB_UV_w3hDrZjWp20KeB-2B1dyEmToVMvSfvGWk"></image>
</pattern>

Image tiling & stretching is in the sample you pointed to. If you're not looking for tiling, then you probably just want to set preserveAspectRatio to a value like "xMidYMid slice" if you don't want the image to scale. — Michael Mullany, Nov 07 '14 at 16:22

How to make an image pattern fill the bounds of svg polygon, but would not stretch (the quality) of the image when resizing?

1 Answers1