html - Firefox 中的 SVG 裂缝（未呈现清晰）

Question

我的 SVG 在 Firefox 中呈现不清晰。Chrome、Opera 和 Safari 等其他浏览器的渲染效果似乎不错。我的 Firefox 版本是 72.0.1

我将我的 SVG 显示为：

<img src="assets/name.svg"/>

这是它在 Opera 浏览器中的外观：

以下是它在 Firefox 中的外观：

标签： htmlimagesvg

Answer 1

根据您显示 svg 的方式，您将它放在一个 img 标签中，这实际上是有效的，但这里的问题是，svg 边缘在 Firefox 中没有呈现清晰。

作为一种解决方法，您可以链接到 SVG 文件，并且还可以通过使用对象标签保留使用 CSS 影响其部分的能力。

<object type="image/svg+xml" data="wtf.svg" class="svg-logo">
  <!-- wtf.svg will render here -->
</object>

这将在 Firefox 中正常工作。

*注意：这在 Chrome、Opera、Safari 中也可以正常工作。