为何Chrome中无法用contentDocument访问SVG文件，Firefox却正常？

这个问题我之前也碰到过，本质是Chrome和Firefox对**本地文件（file://协议）**的同源策略处理差异导致的：

问题原因 #

当你直接双击打开本地HTML文件时，页面的origin是null。Chrome会严格执行同源策略，把通过<object>加载的SVG视为跨源资源，因此禁止访问它的contentDocument属性，就出现了你看到的错误：

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a cross-origin frame

而Firefox在本地文件场景下的限制更宽松，允许同一目录下的资源互相访问，所以你的代码能正常生效。

解决方案 #

1. 用本地服务器运行（推荐） #

这是最规范的解决方式，把HTML和SVG放在本地服务器下运行，这样所有资源的origin都是http://localhost:xxx，就不存在跨域问题了：

• Python 3：在文件目录打开终端，运行

  python -m http.server 8000
  

  然后在浏览器访问http://localhost:8000/你的文件名.html
• Node.js：先全局安装http-server

  npm install -g http-server
  

  然后在文件目录运行

  http-server
  

  按照终端提示的地址访问即可

2. 临时修改Chrome启动参数（仅用于本地测试） #

如果你不想搭服务器，可以通过启动参数让Chrome放宽本地文件的跨域限制，但注意这会降低安全性，只适合测试用：

• Windows：关闭所有Chrome窗口，然后在命令提示符运行

  chrome.exe --allow-file-access-from-files
  

• Mac：关闭所有Chrome窗口，打开终端运行

  open -a "Google Chrome" --args --allow-file-access-from-files
  

  测试完成后，记得恢复正常启动方式，不要一直用这个参数浏览网页。

3. 将SVG内联到HTML中 #

如果你的SVG内容不大，可以直接把SVG代码嵌入HTML文件里，这样就不需要通过<object>加载，直接修改元素样式即可：

<!-- 直接把SVG写在HTML里 -->
<svg id="Map" width="xxx" height="xxx" viewBox="xxx">
  <!-- 你的SVG元素，比如path、rect等 -->
  <path id="targetElem" d="..." />
</svg>

<script>
function mapping(elem){
  document.getElementById(elem).style.fill = 'red';
}
</script>

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