我想实现以下目标:
调整 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 吗?
最佳答案
多边形大小 29px 水平比 viewBox = "0 0 25 10"大 4px
我添加了一个显示 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 的 Canvas ,需要将 SVG 的大小水平增加 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
<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>
关于javascript - 调整多边形点路径(svg)内的图像大小并使其不被剪裁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34200128/