Question

我正在使用内联SVG elemnt用于文本，而在Firefox中，它会在文本边缘呈现青色和黄色条纹 - 这不应该存在。

否则，它在Opera，Chromium和IE10中运行良好。

以下是相关代码：

<h1 style="background-color:black;">
<a href="/">

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.1">

  <defs>
    <linearGradient y2="100%" x2="0%" y1="0%" x1="0%" id="h_gradient">
      <stop offset="50%" style="stop-opacity: 1; stop-color: rgb(229, 229, 229);"/>
      <stop offset="100%" style="stop-opacity: 1; stop-color: rgb(106, 106, 106);"/>
    </linearGradient>

    <filter id="innershadow" x0="-50%" y0="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
      <feOffset dy="3" dx="3"/>
      <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"/>
      <feFlood flood-color="black" flood-opacity="0.6"/>
      <feComposite in2="shadowDiff" operator="in"/>
      <feComposite in2="SourceGraphic" operator="over"/>
    </filter>

  </defs>

  <text font-family="inherit" font-weight="bold" text-anchor="middle"
    fill="url(#h_gradient)" filter="url(#innershadow)" x="50%" y="100">
    <tspan font-size="100" stroke="white">

      Example

    </tspan>
  </text>

</svg>
</a>
</h1>

我认为只有在应用过滤器或渐变时才会发生这种情况，但即使没有它们也会发生 - 它们只是让它更加明显。

有谁能说出它为什么会发生？提前谢谢！

Firefox中文本边缘周围的SVG颜色失真

0 个答案: