Chrome 修改文本剪辑路径的解决方法？答案

【问题标题】：Workaround for Chrome mangling text clip-path?Chrome 修改文本剪辑路径的解决方法？
【发布时间】：2014-12-17 09:14:51
【问题描述】：

谁能建议一种方法让 Chrome 在将小文本用作剪辑路径时不破坏文本？

我正在使用带有文本剪辑路径的 svg。 Windows 7 上的 Chrome 38（以及 37）在用作剪辑路径时会破坏文本，但仅当文本小于特定大小时。以前我可以通过使用 svg 字体来解决这个问题，但 Chrome 38 删除了对 svg 字体的支持。

即使是像下面这样的简单 svg 也会显示问题：

<div id="container">
  <svg id="text_svg" xmlns="http://www.w3.org/2000/svg" width="500" height="403">
    <defs>
      <clipPath id="Si1jwwg9g5">
        <text x="0" y="20" fill="#0000ff" style="font-family: Arial; font-size: 20px;">Testing</text>
      </clipPath>
    </defs>
    <g clip-path="url('#Si1jwwg9g5')">
      <rect x="0" y="0" width="500" height="403" fill="#008000"></rect>
    </g>
  </svg>
</div>

对于非 Windows/Chrome 用户，损坏的文本如下所示：

将文本放大，例如 40 像素而不是 20 像素，可以解决问题。

上面的 sn-p 在 Safari、IE 和 Firefox 上运行良好。

我也尝试过使用视图框，但问题仍然存在。我还尝试使用文本作为蒙版而不是剪辑路径，但问题仍然存在。

【问题讨论】：

我也在 Ubuntu 12.04 (x64) 上的 Chrome 38 上确认了这一点。在 Firefox 中工作正常。不过，很高兴知道增大字体大小是一种解决方案。

标签： text svg clip

【解决方案1】：

我遇到了应用过滤器的文本问题。此问题已在 Chrome 39 中修复： https://code.google.com/p/chromium/issues/detail?id=425530

所以试试beta channel for Chrome 39，看看能不能解决你的问题。

【讨论】：