小编Dan*_*fan的帖子

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

以下动画在 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;
  }
}
Run Code Online (Sandbox Code Playgroud)
<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 …
Run Code Online (Sandbox Code Playgroud)

html css firefox svg

5
推荐指数
1
解决办法
1224
查看次数

标签 统计

css ×1

firefox ×1

html ×1

svg ×1