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

我在做一個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屬性來實(shí)現(xiàn)動畫，這個部分沒有問題。問題是我給每個text標(biāo)簽的額stroke-width屬性都賦值為8，但是最后一個text，即text3會比其它text的線條粗。我試過了，和顏色和text的和數(shù)量無關(guān)，總是最后一個text的線條更粗。在Chrome、Firefox和Opera上都是如此。

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

圖中的黃色線條是text4，比其它text粗。

請問這是為什么？

回答

編輯回答

萌二代

已找到問題所在，因?yàn)槲淖帜J(rèn)有'fill:black'的屬性，而stroke是沿著文字邊框向內(nèi)和向外擴(kuò)展stroke-width數(shù)值的一半。所以最后一個text標(biāo)簽的fill擋住了前面text標(biāo)簽的一半stroke。
將text的fill設(shè)為none可解決問題。
圖片描述

2018年4月25日 19:11