1

似乎 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>

svg 在 Linux 上的 Firefox 中看起来不错：（对不起，我不能作为新的 SO 用户发布内联图像）

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

在 Mac OS 上的 Chrome 中也是如此（我只能以新 SO 用户的身份发布 2 个链接，因此没有指向屏幕截图的链接，但它本质上是相同的），但rect在 Mac OS 上的 Firefox 中应用了滤镜效果的 s 是模糊的：

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

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

  • 使用feBlendorfeComposite代替feMerge
  • 达到filterRes破坏浏览器的高值

有任何想法吗？

（抱歉，没有包含一个工作演示——我试图创建一个 jsfiddle，但它并不能真正正常工作，因为当 SVG 像 jsfiddle 那样在框架中时，像素捕捉 Javascript 代码不起作用。）

4

0 回答 0