如何拉伸SVG形状的图像以填充其边界？ [英] How to stretch an image in a SVG shape to fill its bounds?

问题描述

我有一个充满图像的SVG形状（平行四边形）。演示可以

 < image preserveAspectRatio =nonexmlns：xlink =http://www.w3.org/1999/xlinkxlink：href =http://i.imgur.com/uTDpE6J.jpgwidth =279height =83>< / image> 
   

EDIT

已删除100％宽度/高度

的提及

I have a SVG shape (a parallelogram) which is filled with an image. The demo can be seen here.

The SVG object is:

<svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="86" width="281">
<defs>
    <pattern id="blip1" patternUnits="userSpaceOnUse" width="279" height="83">
        <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/uTDpE6J.jpg" width="279" height="83"></image>
    </pattern>
</defs>
<polygon points="49,2 280,2 232,84 1,84" x="1" y="1" style="stroke-linejoin:round; fill:url(#blip1); stroke-width:2; stroke:hsl(212,45%,26%); "></polygon>

But the image is not stretched to the bounds of the shape instead it lies in the middle of the shape.

What I am trying to achieve is this:

But what I am getting is this:

Can anyone suggest me a solution that will apply to all shapes (i.e. pentagon, hexagon, star etc.)? BTW it already works fine with ellipses'.

Solution:

Thanking @olly_uk for the solution. Adding preserveAspectRatio="none" to the image tag solves the problem.

<svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="86" width="281">
<defs>
    <pattern id="blip1" patternUnits="userSpaceOnUse" width="279" height="83">
        <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/uTDpE6J.jpg" width="279" height="83"></image>
    </pattern>
</defs>
<polygon points="49,2 280,2 232,84 1,84" x="1" y="1" style="stroke-linejoin:round; fill:url(#blip1); stroke-width:2; stroke:hsl(212,45%,26%); "></polygon>

解决方案

By adding preserverAspectRatio=none to the image object and setting width/height to 100% seems to do what you want updated fiddle

<image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/uTDpE6J.jpg" width="279" height="83"></image>

EDIT

removed mention of 100% width/height

这篇关于如何拉伸SVG形状的图像以填充其边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！