今天，我开始学习 SVG 并在 HTML 中使用它。
所以，我在 SVG 中创建了一个文件，如下所示:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 400 200">
<path d = "M0,100 L100,100 L125,50 L175,150 L225,50 L275,150 L300,100 L400,100"
style="
stroke: #000000;
stroke-width: 5;
fill: none;
"
/>
</svg>然后我尝试在 html 中将它用作图像:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="menu">
<ul>
<li class="menu-item"><a href="#"><img src="svg/mysvg.svg" height="48" width="48"></img></a></li>
<li ...... />
<li ...... />
<li ...... />
</ul>
</div>
</body>
</html>
但我看不到 svg，因为它没有调整大小。我的错误是什么？谁能指出我正确的方向？
最佳答案
问题是viewBox被写成了小写的b。结果，浏览器无法识别此参数。在没有 viewBox 属性的 SVG 中，假定所有长度都以像素为单位，因此调整 SVG 的大小不会有任何效果。
如果将 viewbox 更改为 viewBox，SVG 将缩放，以便 View 框区域与 SVG 的尺寸匹配(与普通嵌入式图片)。
关于html - 如何调整 html 中 img 标签中使用的 svg 的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40919369/