Wie strecke ich ein Bild in einer SVG-Form, um seine Grenzen zu füllen?

Question

Ich habe eine SVG-Form (ein Parallelogramm), die mit einem Bild gefüllt ist. Die Demo kann seen here sein.

Die SVG-Objekt ist:

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

Aber das Bild ist nicht auf die Grenzen der Form gedehnt, sondern es liegt in der Mitte der Form.

Was ich versuche, dies zu erreichen:

Aber was ich erhalte, ist dies:

Kann mir jemand eine Lösung vorschlagen, die für alle gelten Formen (zB Fünfeck, Sechseck, Stern etc.)? Übrigens funktioniert es schon gut mit Ellipsen.

Answer 1

Hinzufügen von preserverAspectRatio=none zu dem Bildobjekt und Einstellen der Breite/Höhe auf 100% scheint zu tun, was Sie wollen. 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>