SVG 和 text-shadow，Chrome 和 Firefox 的区别答案

【问题标题】：SVG and text-shadow, difference between Chrome and FirefoxSVG 和 text-shadow，Chrome 和 Firefox 的区别
【发布时间】：2018-09-09 06:46:40
【问题描述】：

当通过 CSS 堆叠一堆文本阴影为一些 SVG 文本创建 3D 效果时，我在 Chrome 和 Firefox 之间得到了非常不同的结果。请参阅下面的示例和下面的屏幕截图。

是什么导致了这种差异以及如何避免这种差异？或者我应该使用更好的方法来创建这种效果？

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="100px">
  <defs>
    <style>
      text {
        fill: white;
        font-family: Arial, Sans;
        text-shadow: -1px 1px #1E00BE, -2px 2px #1E00BE, -3px 3px #1E00BE, -4px 4px #1E00BE, -5px 5px #1E00BE, -6px 6px #1E00BE, -7px 7px #1E00BE, -8px 8px #1E00BE, -9px 9px #1E00BE, -10px 10px #1E00BE;
      }
    </style>
  </defs>
  <rect x="0" y="0" width="200" height="100" fill="red"></rect>
  <text x="100px" y="50px" font-size="50" text-anchor="middle" dominant-baseline="middle">Hello</text>
</svg>

铬：

火狐：

【问题讨论】：

在 Chrome 上我看到了 FF 你发布的截图
有趣，在 Android 的 chrome 65 上，我得到与你相同的结果，但在 macOS 上的相同 chrome 65 上，我得到 FF 结果。这往往会导致 chrome 端出现特定于平台的错误，因此最好通过opening a ticket 让他们知道，并指定您自己的平台。

标签： css google-chrome firefox svg

【解决方案1】：

text-shadow 用于 HTML 元素，不应依赖它（大部分）适用于 SVG 的事实。例如，它可能根本不显示在 IE 上。

我建议用多个文本元素复制效果，例如：

 <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="100px">
      <defs>
        <style>
          text {
            fill: #1E00BE;
            font-family: Arial, Sans;
            font-size: 50px;
            text-anchor: middle;
            dominant-baseline: middle;
          }
          text:last-of-type {
            fill: white;
          }
        </style>
      </defs>
      <rect x="0" y="0" width="200" height="100" fill="red"></rect>
      <text x="100" y="50">Hello</text>
      <text x="100" y="50" dx="1" dy="-1">Hello</text>
      <text x="100" y="50" dx="2" dy="-2">Hello</text>
      <text x="100" y="50" dx="3" dy="-3">Hello</text>
      <text x="100" y="50" dx="4" dy="-4">Hello</text>
      <text x="100" y="50" dx="5" dy="-5">Hello</text>
      <text x="100" y="50" dx="6" dy="-6">Hello</text>
      <text x="100" y="50" dx="7" dy="-7">Hello</text>
      <text x="100" y="50" dx="8" dy="-8">Hello</text>
      <text x="100" y="50" dx="9" dy="-9">Hello</text>
      <text x="100" y="50" dx="10" dy="-10">Hello</text>
    </svg>

【讨论】：