动画后 SVG 路径发生变化

我正在画一个<path>它采用矩形的形式，代码如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 70 51" enable-background="new 0 0 70 51" xml:space="preserve">
      <path fill="#FFFFFF" stroke="#000" stroke-miterlimit="10" d="M18.8,50.5h-7.9V29.7h7.9V50.5z"/>
</svg> 

使用以下 CSS 代码对其进行动画处理这个方法 http://codepen.io/MyXoToD/blog/howto-self-drawing-svg-animation:

svg {
  max-width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; }

 svg path {
    animation: draw 1s linear forwards;
    -webkit-animation: draw 1s linear forwards;
    stroke-dasharray: 57.4;
    stroke-dashoffset: 57.4; }

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

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }

这里有一个代码笔：http://codepen.io/anon/pen/emvWEL http://codepen.io/anon/pen/emvWEL

问题是右下角没有完全连接——也就是说，它不是一个完整的矩形，并且路径中有一个小间隙。但是，当您删除动画时（svg pathCSS 的一部分，矩形是封闭的。

我认为这可能是由于 dasharray 或 dashoffset 造成的，但调整值后，我无法修复它。有什么想法吗？

提前致谢！

默认值为stroke-linecap http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty is butt.

简单添加stroke-linecap="square".

更新了 CodePen http://codepen.io/anon/pen/PwpmRW

svg#animated {
  max-width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
svg#animated path {
  animation: draw 1s linear forwards;
  -webkit-animation: draw 1s linear forwards;
  stroke-dasharray: 57.4;
  stroke-dashoffset: 57.4;
}
@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }

<svg id="animated" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 51" enable-background="new 0 0 70 51" xml:space="preserve">
  <path fill="#FFFFFF" stroke="#999" stroke-miterlimit="10" stroke-linecap="square" d="M18.8,50.5h-7.9V29.7h7.9V50.5z" />
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 51" enable-background="new 0 0 70 51" xml:space="preserve">
  <path fill="#FFFFFF" stroke="#999" stroke-miterlimit="10" d="M18.8,50.5h-7.9V29.7h7.9V50.5z" />
</svg>

或者，您可以增加stroke-dasharray and stroke-dashoffset值一点，例如58.