SVG的stroke-width問題，相同的數值不一樣的效果

我在做一個svg的文本路徑的動畫，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        *
        {
            padding:0;
            margin:0;
        }
        body
        {
            display:flex;
            justify-content: center;
            align-items:center;
            height:100vh;
            font-family: 'Microsoft Yahei';
        }

        #text0
        {
            animation: move0 8s ease infinite;
        }
        @keyframes move0
        {
            0% { stroke-dasharray: 0,850px; }
            50%{ stroke-dasharray: 500px,500px; }
            100%{ stroke-dasharray: 0,850px; }
        }
        #text1
        {
            animation: move1 8s ease infinite;
        }
        @keyframes move1
        {
            0% { stroke-dasharray: 0,850px; }
            50%{ stroke-dasharray: 250px,250px; }
            100%{ stroke-dasharray: 0,850px; }
        }
        #text2
        {
            animation: move2 8s ease infinite;
        }
        @keyframes move2
        {
            0% { stroke-dasharray: 0,850px; }
            50%{ stroke-dasharray: 125px,125px; }
            100%{ stroke-dasharray: 0,850px; }
        }
        #text3
        {
            animation: move3 8s ease infinite;
        }
        @keyframes move3
        {
            0% { stroke-dasharray: 0,850px; }
            50%{ stroke-dasharray: 65px,160px; }
            100%{ stroke-dasharray: 0,850px; }
        }
    </style>
</head>
<body>
    <svg width='600' height='300' style='background:black;'>
        <g>
            <text id='text0' x='40' y='240' stroke-width='8' stroke='red' style='font-size:220px;'>TEXT</text>
            <text id='text1' x='40' y='240' stroke-width='8' stroke='green' style='font-size:220px;'>TEXT</text>
            <text id='text2' x='40' y='240' stroke-width='8' stroke='blue' style='font-size:220px;'>TEXT</text>
            <text id='text3' x='40' y='240' stroke-width='8' stroke='yellow' style='font-size:220px;'>TEXT</text>
        </g>
    </svg>
</body>
</html>

在線瀏覽：http://runjs.cn/code/hje4208f。
用CSS的動畫控制text的stroke-dasharray屬性來實現(xiàn)動畫，這個部分沒有問題。問題是我給每個text標簽的額stroke-width屬性都賦值為8，但是最后一個text，即text3會比其它text的線條粗。我試過了，和顏色和text的和數量無關，總是最后一個text的線條更粗。在Chrome、Firefox和Opera上都是如此。

現(xiàn)象如下圖：
圖片描述