Google chrome 为什么我的SVG文件在不同的浏览器中显示不同？

我已经使用Inkscape创建了一个SVG。现在，我已经把它上传到我的网页上，它在不同的浏览器中显示不同的内容，但我不知道问题出在哪里

Firefox：最佳渲染 Chrome：左侧出现故障

至少，我希望Chrome渲染的质量和Firefox渲染的质量一样，但我不知道怎么做

SVG文件：

网站：

---

还要提到，如果我在没有HTML页面的情况下使用Chrome打开SVG，它会像Firefox一样显示，但会缩小。

最好是创建一个缩小的测试用例，其中只包含出错的部分，否则你会让人们费力地浏览大量的标记。Chrome似乎不会在视口之外被切断。你试过svg:not（：root）{overflow:hidden；}from吗？Chrome还不支持overflow:visible在外部

元素上。Firefox支持。Chrome36+（和Opera23+）支持html内联的

svg

元素上的

overflow:visible

。请始终提及您正在测试的版本。对我来说，Opera25和Firefox夜间版的网站看起来是一样的。我添加了viewBox属性，它在Firefox上显示得像Chrome，但当我删除它时。Firefox在此处呈现为图像。