SVG and keyframes not drawing letters fully - html

Question

When playing around with some SVG animation, i ran into a strange artifact. When rendering keystroke-dashoffset animations in Chrome (haven't tested any other browsers) stops before they are finished, see below. In this case it is the S and M.
The lines also seem to retract a bit in the beginning. How do i fix this so that the letters render fully?
I use OSX El Capitan and Chrome v.51.0.2704.84.
Here is the code (not written by me):
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

The problem lies in the stroke-dasharray property in CSS. Setting this to a value larger than 100% (125% is enough for most fonts) will draw the letters correctly. This will cause the letters to already be drawn when the animation starts, so i set the stroke-dashoffset property to 125%, too.
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>