带有“stroke-dashoffset”CSS动画的SVG文本在Firefox中不起作用答案

【问题标题】：SVG text with ‘stroke-dashoffset’ CSS animation not working in Firefox带有“stroke-dashoffset”CSS动画的SVG文本在Firefox中不起作用
【发布时间】：2018-02-09 18:42:24
【问题描述】：

以下动画在 Chrome 和 Opera 中运行良好，但在 Mozilla Firefox 中无法运行。我不知道为什么。

有人可以帮我解决这个问题吗？我的 CSS 有什么问题？

#text-logo {
  font-family: 'Shrikhand', cursive;
  stroke-dashoffset: 100%;
  stroke-dasharray: 100%;
  -moz-animation: draw 8s forwards ease-in;
  -webkit-animation: draw 8s forwards ease-in;
  animation: draw 8s forwards ease-in;
  background-clip: text;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

<div class="draw_text">
  <svg width="1092" height="220">
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
  </svg>
</div>

【问题讨论】：

标签： html css firefox svg

【解决方案1】：

单位必须在 Firefox 中匹配，所以如果基数是百分比单位，那么动画值也必须是百分比。

没有 -moz-animation 或 -moz-keyframes 这样的东西，任何带前缀的动画都应该放在无前缀版本之前。我在下面也解决了这个问题。

#text-logo {
  font-family: 'Shrikhand', cursive;
  stroke-dashoffset: 100%;
  stroke-dasharray: 100%;
  -webkit-animation: draw 8s forwards ease-in;
  animation: draw 8s forwards ease-in;
  background-clip: text;
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0%;
  }

@keyframes draw {
  100% {
    stroke-dashoffset: 0%;
  }
}

}

<div class="draw_text">
  <svg width="1092" height="220">
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
  </svg>
</div>

【讨论】：

我认为不再需要 webkit 前缀了。

【解决方案2】：

设置stroke-dashoffset: 100% 看起来很整洁，但100% 是什么？ canonical definition 是：

如果使用百分比，则该值表示当前视口的百分比……

…的百分比计算为sqrt((<i>actual-width</i>)**2 + (<i>actual-height</i>)**2))/sqrt(2)的指定百分比。

Firefox 似乎没有实现这一点。设置px 长度使其工作：

#text-logo {
  font-family: 'Shrikhand', cursive;
  stroke-dashoffset: 1114px;
  stroke-dasharray: 1114px;
  -moz-animation: draw 8s forwards ease-in;
  -webkit-animation: draw 8s forwards ease-in;
  animation: draw 8s forwards ease-in;
  background-clip: text;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

<div class="draw_text">
  <svg width="1092" height="220">
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text>
  </svg>
</div>

【讨论】：

Firefox 确实实现了百分比的规范定义。