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

Question

以下动画在 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>

Answer 1

设置stroke-dashoffset: 100%看起来很简洁，但是 100% 是什么？规范的定义是：

\n\n

\n

如果使用百分比，则该值表示当前视口 \xe2\x80\xa6 的百分比

\n

\n\n\n\n

\n

\xe2\x80\xa6百分比计算为 的指定百分比。sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2)

\n

\n\n

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

\n\n

\r\n

\r\n

#text-logo {\r\n  font-family: \'Shrikhand\', cursive;\r\n  stroke-dashoffset: 1114px;\r\n  stroke-dasharray: 1114px;\r\n  -moz-animation: draw 8s forwards ease-in;\r\n  -webkit-animation: draw 8s forwards ease-in;\r\n  animation: draw 8s forwards ease-in;\r\n  background-clip: text;\r\n}\r\n\r\n@keyframes draw {\r\n  100% {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n@-webkit-keyframes draw {\r\n  100% {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n@-moz-keyframes draw {\r\n  100% {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n