Question

我有两个带有SVG的示例和一些带有SVG过滤器的文本，其中文本在Firefox中显示为模糊。在Chrome浏览器中，应用过滤器的文字很清晰。

SVG用作地图，因此第一个示例使用此SVG-Pan-Zoom库（https://github.com/ariutta/svg-pan-zoom）

示例1：http://plnkr.co/edit/P4o7JUY4fNg5DDzF3QiD?p=preview

有趣的是，在平移地图时，文字会在短时间内显得清晰。

对于第二个例子，我能够通过在HTML中使用SVG来重建问题，而不涉及任何Javascript。

示例2：http://plnkr.co/edit/UJMMFS5hGTIzesWXFf1Q?p=preview

以下是过滤器：

<filter id="drop_shadow">
  <feFlood flood-color="white" result="flood"/>
  <feOffset id="offset_1" dx="-3.0" dy="0" in="SourceAlpha" result="offset1"/>
  <feComposite operator="in" in="flood" in2="offset1" result="shadow1"/>
  <feOffset id="offset_2" dx="0" dy="3.0" in="SourceAlpha" result="offset2"/>
  <feComposite operator="in" in="flood" in2="offset2" result="shadow2"/>
  <feOffset id="offset_3" dx="3.0" dy="0" in="SourceAlpha" result="offset3"/>
  <feComposite operator="in" in="flood" in2="offset3" result="shadow3"/>
  <feOffset id="offset_4" dx="0" dy="-3.0" in="SourceAlpha" result="offset4"/>
  <feComposite operator="in" in="flood" in2="offset4" result="shadow4"/>
  <feMerge>
    <feMergeNode in="shadow1"/>
    <feMergeNode in="shadow2"/>
    <feMergeNode in="shadow3"/>
    <feMergeNode in="shadow4"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

这是文本元素：

<text font-size="51.999999852629884" class="map-text" 
      x="2290.25362319" y="2501.0326087" filter="url(#drop_shadow)" 
      style="font-family: DejaVuSansBook,Arial,Helvetica,sans-serif; 
      text-anchor: middle; pointer-events: none; stroke-linecap: butt; 
      stroke-linejoin: miter;">Some Text</text>

我有什么想法可以解决这个问题，所以Firefox中的文字总是很清晰？可能是因为平移和缩放库应用于svg的转换？转型看起来像：

<g id="viewport-20160105141350663" 
   transform="matrix(0.33444816053511706,0,0,0.33444816053511706,-517.7257525083612,-343.97993311036794)">

这可以在第二个例子中看到。

SVG文本在Firefox中模糊

0 个答案: