SVG和文字阴影，Chrome和Firefox之间的区别

Question

通过CSS堆叠一堆文字阴影在某些SVG文本上创建3D效果时，Chrome和Firefox之间会产生截然不同的结果。请参阅下面的示例和下面的屏幕截图。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

铬：

火狐：

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>