使用embed标签嵌入SVG时出现#document(about:blank)问题求助

核心问题：标签属性使用错误 #

你当前代码里的embed标签用了data属性指定SVG路径，但data属性是用于嵌入**内联数据（比如base64编码内容）**的，外部文件路径应该用src属性。这就是浏览器没发起请求的根本原因——它以为你要嵌入内联数据，而非加载外部文件。

修正后的代码 #

把embed标签的data替换为src：

<div id="paraone">
    <div class="righthand-graphics-container">
         <embed id="infographic" src="path to svg" type="image/svg+xml" />
         <embed id="infographic-0" src="path to svg" type="image/svg+xml" />
    </div>
    <p></p>
</div>

如果用object标签，要确保使用data属性（object的外部路径属性是data），同时添加fallback内容：

<object id="infographic" data="path to svg" type="image/svg+xml">
  <img src="path to svg" alt="Infographic fallback" />
</object>

外部样式生效的额外注意事项 #

要让外部样式表作用于SVG，还需要：

• 在SVG文件开头添加样式引用，比如：

  <?xml-stylesheet type="text/css" href="your-external-styles.css"?>
  

  或者在SVG的<defs>节点内添加：

  <link rel="stylesheet" href="your-external-styles.css" />
  

• 确保SVG文件和样式表同域，如果跨域，需要在服务器端配置CORS响应头（比如Access-Control-Allow-Origin: *），否则浏览器会阻止样式加载。

其他排查点 #

1. 强制刷新浏览器：按Ctrl+F5清除缓存，避免旧的错误缓存影响加载。
2. 检查路径拼写：直接在浏览器地址栏输入SVG路径，确认能正常访问。
3. 查看控制台错误：打开开发者工具的Console标签，排查是否有隐藏的加载错误提示（比如MIME类型不匹配、权限问题）。

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