极客观点
项目管理
HarmonyOS
我在做一个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粗。
请问这是为什么？
已找到问题所在，因为文字默认有'fill:black'的属性，而stroke是沿着文字边框向内和向外扩展stroke-width数值的一半。所以最后一个text标签的fill挡住了前面text标签的一半stroke。
将text的fill设为none可解决问题。