问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

svg显示问题？

头像
chjxhcdc
    2501887

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

    <?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上
    image.png
    firefox上
    image.png

    前端javascriptsvg
    阅读 957
    avatarAI BotBETA

    这个问题可能是由于 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 代码以确定问题的具体原因。您可能需要寻找具有类似问题的其他开发者或者在开发社区中寻求帮助。

    1 个回答
    得票最新
    头像
    Meathill
      22.5k133642
      ✓ 已被采纳

      A 能显示，B 不能，很明显是兼容性问题，不过具体是什么问题，就不太清楚。

      如果是我的话，我会逐行删掉 SVG 里的内容，直到剩下的部分可以显示；然后再逐段删掉代码，直到剩下的代码可以正常显示。

      这样就可以确定出问题的代码，然后去各种平台搜索，多半能找到结果。即使暂时解决不了，多数也有绕过的方案。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题