我希望能实现以下目标:
将SVG元素内的图像调整大小,以完全适应多边形内,并且使其完全可见,不被裁剪(请参见jsfiddle)。
我查看了许多stackoverflow问题,但无法解决:
代码:
将SVG元素内的图像调整大小,以完全适应多边形内,并且使其完全可见,不被裁剪(请参见jsfiddle)。
我查看了许多stackoverflow问题,但无法解决:
代码:
<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/Canvas?