Question

我想要实现以下目标：

调整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？

Answer 1

多边形29像素水平尺寸比viewBox =“ 0 0 25 10”大4像素

我添加了一个灰色框，用于显示SVG画布的边界

<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"

<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>

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

1 个答案: