Question

当玩一些SVG动画时，我遇到了一个奇怪的神器。在Chrome中渲染击键 - dashoffset动画（尚未测试任何其他浏览器）在完成之前停止，请参见下文。在这种情况下，它是S和M.

这些线条在开始时似乎也有所收缩。我如何解决这个问题，使字母完全渲染？

我使用OSX El Capitan和Chrome v.51.0.2704.84。

这是代码（不是我写的）：

＆＃13;

text {
  font-family: sans-serif;

  stroke-dasharray: 100%;
  stroke-dashoffset: 100%;

  -webkit-animation: draw 8s forwards;
     -moz-animation: draw 8s forwards;
       -o-animation: draw 8s forwards;
      -ms-animation: draw 8s forwards;
          animation: draw 8s forwards;
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<svg width="500" height="150">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Some text</text>
</svg>

＆＃13;

Answer 1

问题在于CSS中的stroke-dashoffset属性。将此值设置为大于100％的值（对于大多数字体，125％就足够了）将正确绘制字母。这将导致动画开始时已经绘制了字母，因此我也将body { background:black; } text { font-family: initial; stroke-dasharray: 125%; stroke-dashoffset: 125%; -webkit-animation: draw 5s ease-in-out forwards; -moz-animation: draw 5s ease-in-out forwards; -o-animation: draw 5s ease-in-out forwards; -ms-animation: draw 5s ease-in-out forwards; animation: draw 5s ease-in-out forwards; } @-webkit-keyframes draw { 100% { stroke-dashoffset: 0; } } @-moz-keyframes draw { 100% { stroke-dashoffset: 0; } } @-o-keyframes draw { 100% { stroke-dashoffset: 0; } } @-ms-keyframes draw { 100% { stroke-dashoffset: 0; } } @keyframes draw { 100% { stroke-dashoffset: 0; } }属性设置为125％。

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<svg width="500" height="150">
  <text x="100" y="80" fill="none" stroke="white" stroke-width="1" font-size="50">Some text</text>
</svg>

$_GET['the_time'] = round(microtime(true) * 1000);

SVG和关键帧没有完全绘制字母

1 个答案: