There is an SVG shape in the form of a parallelogram that has been filled with an image. To view the demo, click here.
The code for the SVG object is as follows:
<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>However, the image does not expand to fit the shape's boundaries and instead remains centered within the shape.
I am looking to achieve this:
But what I currently have is this:
If anyone can provide a solution that works universally for all shapes (e.g., pentagons, hexagons, stars), it would be greatly appreciated. It is already functioning correctly with ellipses.