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属性来实现动画,这个部分没有问题。问题是我给每个text标签的额stroke-width属性都赋值为8,但是最后一个text,即text3会比其它text的线条粗。我试过了,和颜色和text的和数量无关,总是最后一个text的线条更粗。在Chrome、Firefox和Opera上都是如此。

现象如下图:
图片描述

图中的黄色线条是text4,比其它text粗。

请问这是为什么?

阅读 3.4k
评论
    1 个回答

    已找到问题所在,因为文字默认有'fill:black'的属性,而stroke是沿着文字边框向内和向外扩展stroke-width数值的一半。所以最后一个text标签的fill挡住了前面text标签的一半stroke。
    将text的fill设为none可解决问题。
    图片描述

      相似问题
      推荐文章