Как растянуть изображение в форме SVG, чтобы заполнить его границы?

У меня есть SVG-форма (параллелограмм), которая заполняется изображением. Демо может быть здесь..

Объект 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="#" onclick="location.href='http://i.imgur.com/uTDpE6J.jpg'; return false;" 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>

ОТВЕТЫ

Ответ 1

Добавление preserverAspectRatio=none к объекту изображения и установка ширины/высоты до 100%, похоже, делает то, что вы хотите. Обновлена ​​скрипка

<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="#" onclick="location.href='http://i.imgur.com/uTDpE6J.jpg'; return false;" 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>