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

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？

- Nicola T. Curie

Answer 1

多边形大小为29像素，水平方向比视口框架"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水平尺寸增加4像素 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>

- Alexandr_TT