如何在SVG形狀中伸展圖像以填充其邊界？

Question

我有一個充滿圖像的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>

但圖像沒有被拉伸的形狀的邊界，而是在於形狀的中間。

我想實現的是：

但是我得到的是這樣的：

任何人都可以給我建議，將適用於所有的解決方案形狀（即五角形，六角形，星形等）？順便說一句，它已與橢圓工作正常。

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