如何在 <svg> 标签内显示 PNG 图像？
Posted
技术标签:
【中文标题】如何在 <svg> 标签内显示 PNG 图像？【英文标题】：How to show a PNG image inside a <svg> tag? 【发布时间】：2021-11-11 00:46:18 【问题描述】：我有一个带有viewBox="0 0 1000 1000" 的<svg> 标签，我在其中绘制了一个多边形，该多边形在1000x1000 框的某些部分上绘制了一个三角形。然后这个 SVG 被缩放到 width="100"。
我想在 SVG 背景中的三角形后面添加一个 PNG 图像，例如 https://www.w3schools.com/html/pic_trulli.jpg，它也将以相同的方式进行缩放。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<svg viewBox="0 0 1000 1000" >
<polygon points="100 100, 900 100, 900 900" />
</svg>
</body>
</html>【问题讨论】：
你给 svg 图片正确的坐标了吗？ @rattlesnake 这可能会帮助你：***.com/a/30897481/13858444 替代支持：codegrepper.com/code-examples/html/display+svg+image+in+html 【参考方案1】：就是<image>：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<svg viewBox="0 0 1000 1000" >
<image x="0" y="0" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/html/pic_trulli.jpg" />
<polygon points="100 100, 900 100, 900 900" />
</svg>
</body>
</html>【讨论】：
以上是关于如何在 <svg> 标签内显示 PNG 图像？的主要内容，如果未能解决你的问题，请参考以下文章