如何让Chrome和Firefox中缩放SVG时呈现模糊而非保持清晰？

嘿，这个需求挺有意思的——既然Safari已经自带了你想要的模糊效果，那咱们就想办法让Chrome和Firefox也跟上节奏就行。给你几个实用的方案，按需选择：

1. 用CSS滤镜手动模拟模糊 #

这是最直接的方法：当你的SVG触发15倍缩放时（比如通过滚动添加了特定类名，比如scaled-up），给SVG里的圆形加上模糊滤镜，微调数值就能匹配Safari的效果。

/* 假设滚动时给SVG加了.scaled-up类 */
.scaled-up circle {
  filter: blur(0.5px); /* 数值可以根据实际视觉效果调整，0.3-0.8px区间都试试 */
}

如果担心影响Safari的现有效果，可以用浏览器前缀的媒体查询，只给Chrome和Firefox应用：

/* 针对Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  .scaled-up circle {
    filter: blur(0.6px);
  }
}

/* 针对Firefox */
@-moz-document url-prefix() {
  .scaled-up circle {
    filter: blur(0.5px);
  }
}

2. 使用SVG内置模糊滤镜 #

如果更倾向于SVG原生方案，可以在你的SVG文件里预先定义一个模糊滤镜，然后在缩放时给圆形应用它：

<!-- 先在SVG的defs里定义滤镜 -->
<defs>
  <filter id="bubble-blur">
    <feGaussianBlur stdDeviation="0.5" /> <!-- 同样可以调整这个数值 -->
  </filter>
</defs>

然后通过CSS或者JS在缩放状态下给圆形加上滤镜引用：

.scaled-up circle {
  filter: url(#bubble-blur);
}

这种方法的优势是完全基于SVG标准，兼容性也很好，不会和CSS滤镜产生冲突。

3. 调整浏览器渲染优化（备选方案） #

Chrome和Firefox默认会对缩放的矢量图形做抗锯齿优化，以此保持清晰。如果前面的方法效果不够，你可以尝试禁用部分硬件加速优化，让图形自然模糊：

.scaled-up svg {
  transform: scale(15) translateZ(-1px);
  will-change: auto;
}

不过这个方法稳定性稍差，不同浏览器版本可能表现不同，优先推荐前两种方案。

小提示 #

因为是15倍的大比例缩放，模糊值不用设置太高，否则会过度模糊影响视觉效果。建议先从0.4px左右开始调试，慢慢调整到和Safari一致的景深效果就好~

内容的提问来源于stack exchange，提问作者Tijgerbrood