svg 无法在 Firefox 上显示

svg cannot be displayed on Firefox

提问人:D.joe 提问时间:10/24/2023 最后编辑:D.joe 更新时间:10/24/2023 访问量:51

问:

我有一个使用 xml 代码编写的 svg 图像。此代码可以在 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>

边缘

在此处输入图像描述

火狐浏览器

在此处输入图像描述

JavaScript HTML XML SVG 火狐

评论

0赞 Robert Longson 10/24/2023
将 path 和 viewBox 值除以 100000

答:

0赞 chrwahl 10/24/2023 #1

这是 SVG 的更简单版本。我缩放了路径并将其移动到 0,0。

body {
  color: orange;
}

svg {
  border: thin solid gray;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">
  <path d="M 28 40 L 28 42 L 0 42 L 0 0 L 2 0 L 2 40 L 28 40 Z" fill="currentColor"/>
</svg>