SVGとキーフレームが完全に文字を描いていない

Question

SVGアニメーションで遊んでいるとき、私は奇妙なアーティファクトに遭遇しました。 Chromeでキーストローク - ダッシュオフセットアニメーションをレンダリングすると（他のブラウザをテストしていない）、アニメーションが終了する前に停止します（下記参照）。この場合、それはSとMです。

また、行が最初に少し後退しているようです。文字を完全にレンダリングするにはどうしたらいいですか？

OSX El CapitanとChrome v.51.0.2704.84を使用しています。問題は、CSSでstroke-dasharrayプロパティにある

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; 
 
    } 
 
}

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

Answer 1

：ここ

は、コード（私が書かれていない）です。これを100％より大きい値に設定すると（ほとんどのフォントでは125％で十分です）、文字を正しく描画します。これにより、アニメーションの開始時に文字が描画されるので、stroke-dashoffsetプロパティも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; 
 
    } 
 
}

<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>