SVG无法显示问题求助：附HTML与SVG代码

嘿，作为SVG新手遇到这种问题太正常了，我帮你一步步排查和解决：

1. 先确认SVG文件路径是否正确 #

你用的是根路径 /img/menu.svg，这个路径指向的是服务器根目录（比如http://你的域名/img/menu.svg）。如果你的HTML文件不是放在网站根目录（比如在某个子文件夹里），或者本地测试时根目录不是当前项目文件夹，那这个路径就找不到文件。

解决方法：

• 改成相对路径：如果img文件夹和你的HTML文件在同一个目录下，用 img/menu.svg（去掉前面的斜杠）；如果HTML在子文件夹，用 ../img/menu.svg 回到上一级目录再找img文件夹。
• 本地测试时，也可以直接用绝对文件路径，比如 file:///C:/你的项目路径/img/menu.svg（Windows）或者 /Users/你的用户名/项目路径/img/menu.svg（Mac），不过相对路径更通用。

2. 给<object>标签设置明确的宽高 #

你的<object>标签没有指定宽高，虽然SVG内部定义了width="500px"和height="500px"，但有些浏览器可能不会自动识别并应用这个尺寸，导致SVG被缩成看不见的大小。

解决方法：
给<object>加上style属性设置宽高，比如：

<object type="image/svg+xml" data="/img/menu.svg" style="width: 500px; height: 50px;"></object>

（因为你的SVG是一条水平线，高度设50px足够显示10px的描边，不用500px这么大）

3. 检查SVG本身的渲染问题 #

虽然你的SVG代码看起来没问题，但可以做一些小调整确保渲染正常：

• 把样式直接写在<line>标签上，避免类名可能的加载问题：

<line x1="5.8" y1="10" x2="221.8" y2="10" stroke="#000000" stroke-width="10" fill="none" stroke-miterlimit="10"/>

• 调整viewBox的高度，确保描边不会被裁切：比如把viewBox="0 0 228.4 18.2"改成viewBox="0 0 228.4 20"，给10px的描边留出足够空间（描边是居中绘制的，y=10的线，10px描边会覆盖y5到y15的区域，原viewBox高度18.2刚好够，但稍微调大一点更稳妥）。

4. 快速测试：直接嵌入SVG到HTML #

如果上面的方法都没效果，先把SVG代码直接嵌入HTML里，排除路径和<object>标签的问题：

<div style="text-align:center;padding:150px 0;">
  <svg version="1.1" id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.4 20" width="500px" height="50px">
    <line x1="5.8" y1="10" x2="221.8" y2="10" stroke="#000" stroke-width="10" fill="none"/>
  </svg>
</div>

如果这样能显示，那问题肯定出在路径或者<object>的设置上；如果还是不显示，那可能是浏览器的缓存问题，清空缓存再试试。

按照上面的步骤来，应该就能解决你的SVG不显示问题啦～

内容的提问来源于stack exchange，提问作者index