代码之家 › 专栏 › 技术社区 › tonymx227

将图像拉伸到SVG中

svg html5

tonymx227 · 技术社区 · 6 年前

我想将图像拉伸到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>

1 回复 | 直到 6 年前

Ted 6 年前

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

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

3 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

3 年前

Sougata Mukherjee · 如何同时悬停svg和文本

3 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

3 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

3 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

3 年前