अपनी सीमाओं को भरने के लिए एक एसवीजी आकार में एक छवि को कैसे फैलाएं?

Question

मेरे पास एक एसवीजी आकार (एक समांतरोग्राम) है जो एक छवि से भरा हुआ है। डेमो seen here हो सकता है।

एसवीजी वस्तु है:

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