在多边形点路径（svg）内调整图像大小并使其不被剪裁

Question

I want to achive the following:

Resize the image inside the svg element to perfectly fit inside a polygon, and furthermore that it is fully viewable, and not clipped ( see jsfiddle).

I have gone through many stackoverflow questions but cannot figure it out:

Code:

 <svg width="50%" height="50%" viewBox="0 0 25 10" preserveAspectRatio="none"> <defs> <pattern id="im1" width="100%" height="100%" preserveAspectRatio="none"> <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://dummyimage.com/600x400/abc" width="100%" height="100%"></image> </pattern> </defs> <polygon points="0,10 29, 10 10, 0" x="0" y="0" style="fill:url(#im1);"></polygon> </svg>

See https://jsfiddle.net/f8ktzyLw/

Can someone point me in the right direction ? is this achievable with svg only or do i need JavaScript/Canvas ?

Answer 1

Polygon size 29px horizontal is 4px larger than viewBox = "0 0 25 10"

I added a gray frame that shows the boundaries of the SVG canvas

 <svg width="50%" height="50%" viewBox="0 0 25 10" preserveAspectRatio="none" style="border:1px solid gray"> <defs> <pattern id="im1" width="100%" height="100%" preserveAspectRatio="none"> <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://dummyimage.com/600x400/abc" width="100%" height="100%"></image> </pattern> </defs> <polygon points="0,10 29, 10 10, 0" x="0" y="0" style="fill:url(#im1);"></polygon> </svg>

To make the polygon fully fit inside the canvas of the SVG, it is necessary to increase the size of the SVG horizontally by 4px viewBox="0 0 29 10"

 <svg width="50%" height="50%" viewBox="0 0 29 10" preserveAspectRatio="none" style="border:1px solid gray"> <defs> <pattern id="im1" width="100%" height="100%" preserveAspectRatio="none"> <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://dummyimage.com/600x400/abc" width="100%" height="100%"></image> </pattern> </defs> <polygon points="0,10 29, 10 10, 0" x="0" y="0" style="fill:url(#im1);"></polygon> </svg>

Or you can leave the dimensions of the viewBox="0 0 25 10 unchanged, but then you need to reduce the horizontal size of the polygon by the same 4px

 <svg width="50%" height="50%" viewBox="0 0 25 10" preserveAspectRatio="none" style="border:1px solid gray"> <defs> <pattern id="im1" width="100%" height="100%" preserveAspectRatio="none"> <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://dummyimage.com/600x400/abc" width="100%" height="100%"></image> </pattern> </defs> <polygon points="0,10 25, 10 10, 0" x="0" y="0" style="fill:url(#im1);"></polygon> </svg>