0

我有以下要制作动画的 SVG 文本。动画没有问题，但是 dash-array 的长度从 Chrome 到 Safari 不同（尚未在其他地方测试）。

请注意，stroke-dasharray 在 Chrome 上工作在 87，在 Safari 上工作在 837。为什么不一样？

#chrome{
   stroke-dasharray: 87;
   stroke-dashoffset: 87;
   transition: .5s;
}

#chrome:hover{
  stroke-dashoffset: 0;
}

#safari{
   stroke-dasharray: 837;
   stroke-dashoffset: 837;
   transition: .5s;
}

#safari:hover{
  stroke-dashoffset: 0;
}
Chrome: Hover below.
<svg width="500" viewBox="0 0 102 17">
    
    <text id="chrome" x="0" y="13" stroke-width=".2" stroke="red" fill="none">Web Design.</text>

</svg>
<br>
Safari: Hover below.
<svg width="500" viewBox="0 0 102 17">
    
    <text id="safari" x="0" y="13" stroke-width=".2" stroke="red" fill="none">Web Design.</text>

</svg>

4

0 回答 0