如何将SVG形状中的图像拉伸以填充其边界？

Question

如何将SVG形状中的图像拉伸以填充其边界？

13

我有一个SVG形状（平行四边形），其中填充了一张图片。演示可以在这里看到。

SVG对象是：

<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>
</svg>

然而，图像并未拉伸至图形的边界，而是位于图形中间。

我想要实现的是这样的效果:

Desired result

但我得到的是这个：

Actual result

有没有人能够建议一个适用于所有形状（例如五边形、六边形、星形等）的解决方案？顺便说一句，这已经可以很好地适用于椭圆形了。

- Surender Thakran

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- olly_uk · Accepted Answer

添加 preserverAspectRatio=none 到图片对象中似乎可以实现你想要的效果。更新示例代码

<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>

</svg>