Question

我试图在我的svg上使用投影高斯模糊来制作文字效果。在firefox下它看起来不错，但在Chrome下它很可怕，你可以在下面看到。

enter image description here

奇怪的是，在可能的最大级别进行缩放（ctrl + mousewheel）时，它突然看起来很好，但是在中等缩放级别，它仍然很可怕。

生成此示例的代码是：

<html>
<head>
</head>
<body>
<svg width="200px" heigth="200px">
    <filter id="dropshadow" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
        <feOffset dx="2" dy="2" result="offsetblur" />
        <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
    <text x="50" y="50" style="filter:url(#dropshadow)">This is a test</text>
</svg>
</body>
</html>

我已从this question获取了投影代码。

请注意，我使用的是最新版本的Firefox（33.1）和Chrome（版本38.0.2125.122 m）。

Answer 1

这根本不是正确的行为。看起来Chrome无法正确地为小字体的文本呈现Alpha通道。

如果我只从18,36和72pt的文本中提取alpha通道，这就是我得到的：

bad chrome

＆＃13;

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
  <filter id="f" width="200%" height="200%">
    <feMerge>
      <feMergeNode in="SourceAlpha" />
    </feMerge>
  </filter>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="#eee" />
  <text font-size="18" x="5" y="25" style="filter:url(#f)">Small</text>
  <text font-size="36" x="5" y="75" style="filter:url(#f)">Medium</text>
  <text font-size="72" x="5" y="165" style="filter:url(#f)">Large</text>
</svg>

＆＃13;

编辑：这不是答案，因此我已被标记为社区维基。

谷歌浏览器下文本上的SVG高斯模糊

1 个答案: