如何以 SVG 形状拉伸图像以填充其边界？答案

【问题标题】：How to stretch an image in a SVG shape to fill its bounds?如何以 SVG 形状拉伸图像以填充其边界？
【发布时间】：2013-12-18 13:55:26
【问题描述】：

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

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>

但图像并未拉伸到形状的边界，而是位于形状的中间。

我想要实现的是：

但我得到的是：

谁能建议我一个适用于所有形状（即五边形、六边形、星形等）的解决方案？顺便说一句，它已经可以很好地处理省略号了。

【问题讨论】：

标签： html css svg

【解决方案1】：

将 preserverAspectRatio=none 添加到图像对象 ~~并将宽度/高度设置为 100%~~ 似乎可以满足您的要求。 Updated fiddle

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

【讨论】：

非常感谢......这就像一个魅力。但是不需要将宽度和高度设置为 100%。
酷，我先试过了，没有删除它，将编辑答案
仅供参考，您可以使用 css 形状实现类似的效果。
如果您希望图像放大以填充形状，而不是拉伸，请改用preserveAspectRatio="xMidYMid slice"。