css - SVG 和文字阴影，Chrome 和 Firefox 的区别

Question

当通过 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 :

火狐:

Answer 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>