javascript - svg显示问题？

Question

我有一个svg的xml代码，这段代码可以在edge、chrome浏览器正常打开并显示出svg绘制的内容，而当我用firefox打开的时候，页面却是一片空白，这是什么原因造成的以及如何修复使得firefox上也可以正常显示。
firefox的版本

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="112432687.8498 -17346731.0242  120037.6874 57319.0791" version="1.1" overflow="visible" xmlns:xlink="http://www.w3.org/1999/xlink">  <g id="draft" transform="matrix(1 0 0 -1 0 0)" stroke-width="22.1696">    <g id="COLUMN" color="rgb(128,128,128)" stroke="currentColor" fill="none" stroke-width="22.1696">      <g id="ID_52FB" fill="currentColor">        <path          d=" M 112460613.0866 17325627.2947 L 112460613.0866 17325827.2947   L 112457813.0866 17325827.2947   L 112457813.0866 17321577.2947   L 112458013.0866 17321577.2947   L 112458013.0866 17325627.2947   L 112460613.0866 17325627.2947 " />      </g>    </g>      </g></svg>

edge上

firefox上

Answer 1

这个问题可能是由于 Firefox 浏览器对于 SVG 的某些特性支持不足或者处理方式不同导致的。以下是一些可能的解决方案：

1. 检查 SVG 代码：首先，检查 SVG 代码中是否存在一些不被 Firefox 支持的元素或属性。您可以将 SVG 代码粘贴到在线的 SVG 验证工具中，例如 W3C 的 SVG 验证工具，以检查是否存在任何错误或不被支持的元素。
2. 检查 CSS：Firefox 可能对某些 CSS 属性和值的支持不如其他浏览器。尝试将 CSS 属性名称和值替换为已知在 Firefox 中工作的等效项。
3. 使用 prefixfree：Prefixfree 是一个 JavaScript 库，可以让 CSS 支持无需使用供应商特定的前缀。这可能有助于解决跨浏览器兼容性问题。
4. 使用 SVGOMG：SVGOMG 是一个优化 SVG 图像的在线工具。它可以帮助您优化 SVG 图像，以使其可以在更多浏览器中正常工作。
5. 检查 Firefox 版本：某些旧版本的 Firefox 可能对某些 SVG 功能支持不足。如果可能，尝试更新 Firefox 到最新版本，或者使用其他浏览器进行测试。

如果以上方法都无法解决问题，可能需要进一步检查 SVG 代码以确定问题的具体原因。您可能需要寻找具有类似问题的其他开发者或者在开发社区中寻求帮助。