html - SVG 在 Firefox 中渲染不佳

标签 html canvas svg

我正在使用滑动轮播制作信息图 <li> s,但是 SVG 在 Firefox 中显示为像素化,即使 FF 中 SVG 的错误已经解决,我想。任何人都可以看到解决此问题的方法吗?

网址:http://weaver-wp.weavertest.com/radiation-infographic/

最佳答案

您正在将 SVG 文件缩放到非常大的尺寸:

background-size: 9730px 30000px;
background-position: -7310px -29250px;

大多数浏览器不会对非常大的 SVG 形状进行抗锯齿处理,因为它需要太多的图形内存。 (这是我们在 Safari 和 Chrome 中看到的。)看起来 Firefox 实际上是将 SVG 渲染到 Canvas 的大小,然后通过图像插值将其放大到裁剪区域。

两者的修复是相同的:
首先裁剪 SVG,然后仅使用裁剪部分作为背景。

关于html - SVG 在 Firefox 中渲染不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5623436/

相关文章:

javascript - 使用调整大小栏后调整大小不正确?

Javascript 函数调用给出了意想不到的奇怪结果。

css - 存储 gloabl SVG 样式的正确方法(radialGradient)

html - 我可以包含外部 SVG defs

javascript - 如何将 svg Canvas 保存到本地文件系统

html - 绝对定位的元素不显示 margin-left 效果

html - Bootstrap 侧边栏导航就像在组件站点上一样

javascript - Fabricjs:如何将导入的 SVG 图像分解为单独的单独 PathGroup,而不是一个?

android - 旋转后从侧面切割的ImageView

javascript - Canvas - 贝塞尔曲线重复