在多边形点路径(svg)内调整图像大小并使其不被裁剪 [英] Resize image inside polygon point path(svg) and make it not clipped
问题描述
我要实现以下目标:
调整svg元素内的图像大小以使其完全适合多边形内,此外,该图像是完全可见的,不会被剪切(请参见jsfiddle).
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).
我经历了很多stackoverflow问题,但无法弄清楚:
I have gone through many stackoverflow questions but cannot figure it out:
代码:
<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>
请参见 https://jsfiddle.net/f8ktzyLw/
有人可以指出我正确的方向吗?这是仅可以通过svg实现的,还是我需要JavaScript/画布?
Can someone point me in the right direction ? is this achievable with svg only or do i need JavaScript/Canvas ?
推荐答案
多边形的水平尺寸29px比viewBox ="0 0 25 10"大4px
Polygon size 29px horizontal is 4px larger than viewBox = "0 0 25 10"
我添加了一个灰色框,用于显示SVG画布的边界
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>
要使多边形完全适合SVG的画布,必须将SVG的大小水平增加4px viewBox ="0 0 29 10"
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>
或者您可以保持 viewBox ="0 0 25 10
的尺寸不变,但是随后您需要将多边形的水平尺寸减小相同的 4px
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>
这篇关于在多边形点路径(svg)内调整图像大小并使其不被裁剪的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!