1

我有两个带有 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)">

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

4

0 回答 0