Question

我想将图像拉伸为SVG，但似乎无法正常工作。

我为SVG使用了preserveAspectRatio，但是它不起作用，并且图像左右左右都有填充。

我的代码：

<svg class="mapSvg" preserveAspectRatio="none" width="1292px" height="649px" viewBox="0 0 1292 649">

<image xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>

<polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">

</svg>

主要问题：我的图像没有填充SVG。

Answer 1

将preserveAspectRatio="none"移至图像标签。

<svg class="mapSvg" width="1292px" height="649px" viewBox="0 0 1292 649">

  <image preserveAspectRatio="none" xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>

  <polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">

</svg>

将图像拉伸成SVG

1 个答案: