Question

似乎SVG滤镜效果在Mac OS上的Firefox中呈现出奇怪的效果。当我尝试为1px笔划的形状实现投影时，我遇到了这个问题。我在Javascript中进行了一些像素捕捉以及0.5px的偏移，只要没有阴影，这就会使1px笔画变得清晰。

然而，当我使用滤镜效果应用投影时，形状模糊，但仅限于Mac OS上的Firefox（我在Mac OS和Linux上尝试过Firefox和Chrome）。

以下是一些示例代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>

    <!-- A trivial filter that shouldn't really do anything, to demonstrate a minimal case -->
    <filter id="f1" x="-10%" y="-10%" width="120%" height="120%" filterRes="100">
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- A more representative example where this issue is annoying: a drop shadow -->
    <filter id="f2" x="-10%" y="-10%" width="200%" height="200%" filterRes="100">
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
      <feMerge>
        <feMergeNode in="blurOut"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

  </defs>

  <!-- Translating by 0.5 px so that 1px borders are sharp -->
  <g transform="translate(5.5,5.5)">
    <rect width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" />
    <rect x="30" width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" filter="url(#f1)" />
    <rect x="60" width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" filter="url(#f2)" />
  </g>
</svg>

在Linux上的Firefox中svg看起来很好:(抱歉，我无法将内嵌图像作为新的SO用户发布）

http://i.imgur.com/czKP2.png

和Mac OS上的Chrome相同（我只能发布2个链接作为新的SO用户，因此没有指向屏幕截图的链接，但它基本相同），但是应用了滤镜效果的rect在Mac OS上的Firefox中模糊不清：

http://i.imgur.com/7WxI8.png

我尝试过几次调整无济于事，包括：

使用feBlend或feComposite代替feMerge
将filterRes提升为浏览器破坏性较高的值

有什么想法吗？

（不包括工作演示的道歉 - 我试图创建一个jsfiddle，但它并没有真正正常工作，因为像SVGs在框架中的像素捕捉Javascript代码不像jsfiddle那样做。）

为什么在Mac OS上的Firefox中SVG滤镜效果模糊？

0 个答案: