时间戳

首页 > 解决方案 > SVG 在 Firefox 中显示不正确

html - SVG 在 Firefox 中显示不正确

问题描述

我有一个 SVG 计划放在网站上。

SVG 是使用此处描述的方法从 illustrator 生成的

在 Firefox 84.0.1 中查看时，我得到以下信息： 火狐

在 Safari 14.0.2 (16610.3.7.1.9) 和 Chrome 87.0.4280.88 中查看时，我得到以下信息： Safari - 铬

这是 Firefox 的问题还是 SVG 的问题？调试的最佳方法是什么？

编辑

我能够将问题隔离到以下路径。正如其他人指出的那样，问题似乎与 SVG 中的无效路径描述有关。

我能够通过简化 illustrator 中的路径并重新导出来解决问题。

原始与简化

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="138.71" height="102.25" viewBox="0 0 138.71 102.25"><path d="M73.72,95.49a9.59,9.59,0,0,1,5.2,1.3,1990328647664.52,1990328647664.52,0,0,0,.2.2,9,9,0,0,1,3.7,3.8,8.75,8.75,0,0,0,7.7,4.8,8.46,8.46,0,0,0,7.7-4.8A9.27,9.27,0,0,1,102,97c.1-.1.2-.1.3-.2a10.56,10.56,0,0,1,5.2-1.3,8.71,8.71,0,0,0,7.8-4.3,8.39,8.39,0,0,0-.2-8.9,9.55,9.55,0,0,1-1.5-5.2v-.3a9.69,9.69,0,0,1,1.4-5.2,9,9,0,0,0,.3-9.1,8.64,8.64,0,0,0-8-4.3,9.59,9.59,0,0,1-5.2-1.3,2487910809616.32,2487910809616.32,0,0,1-.2-.2,9,9,0,0,1-3.7-3.8,8.75,8.75,0,0,0-7.7-4.8,8.46,8.46,0,0,0-7.7,4.8,9.27,9.27,0,0,1-3.8,3.8c-.1.1-.2.1-.3.2a10.56,10.56,0,0,1-5.2,1.3,8.71,8.71,0,0,0-7.8,4.3,8.39,8.39,0,0,0,.2,8.9,9.55,9.55,0,0,1,1.5,5.2v.3a9.69,9.69,0,0,1-1.4,5.2,9,9,0,0,0-.3,9.1A8.83,8.83,0,0,0,73.72,95.49Z" transform="translate(-61.55 -45.07)" fill="none" stroke="#6d6665" stroke-linejoin="round" stroke-width="6"/><path d="M154.45,95.49a9.11,9.11,0,0,1,5.3,1.4.1.1,0,0,1,.1.1c4.25,2.56,5.31,9,11.4,8.6,6.22.44,7.09-6.08,11.5-8.6s10.63-.31,13.3-5.8c3.54-5.22-1.82-9.29-1.7-14.4,0-4.93,5-9.26,1.7-14.3-2.73-5.6-9-3.13-13.3-5.7a.1.1,0,0,1-.1-.1c-4.25-2.55-5.31-9-11.4-8.6-6.23-.44-7.09,6.09-11.5,8.6s-10.64.31-13.3,5.8c-3.55,5.23,1.81,9.29,1.7,14.4a9.69,9.69,0,0,1-1.4,5.2C142.83,87.73,147.57,96.09,154.45,95.49Z" transform="translate(-61.55 -45.07)" fill="none" stroke="#6d6665" stroke-linejoin="round" stroke-width="6"/><text transform="translate(9.1 84.85)" font-size="12" fill="#231f20" font-family="MyriadPro-Regular, Myriad Pro">O<tspan x="8.27" y="0" letter-spacing="0em">r</tspan><tspan x="12.24" y="0">i</tspan><tspan x="15.05" y="0" letter-spacing="-0.01em">g</tspan><tspan x="21.68" y="0">inal</tspan><tspan x="4.68" y="14.4">32 pts</tspan></text><text transform="translate(84.57 84.85)" font-size="12" fill="#231f20" font-family="MyriadPro-Regular, Myriad Pro">Simplified<tspan x="9.92" y="14.4">15 pts</tspan></text></svg>

标签： htmlcsssvgfirefox

解决方案

以下是相关路径之一开头的摘录：

M 279.17, 522.38
a 9.59, 9.59, 0,0,1, 5.2,1.3,
a 497582161915.69, 497582161915.69, 0,0,1, 0.2, 0.2,
a 9, 9, 0,0,1, 3.7, 3.8,

M是一个移动路径命令。 a表示画一个椭圆弧。

arc 命令中的前两个数字是椭圆的 X 和 Y 半径。不知何故，第二条弧线以巨大的半径结束。

半径那么大，您可以用直线近似它的一小部分。这可能就是 Chrome 和 Safari 正在做的事情。然而，Firefox 显然被这么大的值弄糊涂了。

那条弧线是怎么结束的，我不知道。但您似乎遇到了 FF 不能很好处理的边缘情况。

我建议将其报告为 Illustrator 错误，也可能是 FireFox 错误。同时，要解决这个问题，您需要编辑这些形状并尝试修复那些有缺陷的弧段。

推荐阅读