html - 为什么 "W"字母的中间笔划在我的代码笔上非常尖锐？

Question

这里是演示:https://codepen.io/joondoe/pen/XWrGgyo

这里是代码:

html, body {
  height: 100%;
}

body {
  background: #082330;
  background-size: .12em 100%;
  font: 16em/1 Arial;
}

h1 {
  font-size: 0.15em;
  margin: 30px;
  font-family: Mansalva;
}

.text--line {
  font-size: .5em;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 7% 28%;
  stroke-width: 9px;
  font-family: Mansalva;
  -webkit-animation: stroke-offset 5s infinite linear;
          animation: stroke-offset 5s infinite linear;
}
.text-copy:nth-child(1) {
  stroke: #360745;
  stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
  stroke: #D61C59;
  stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
  stroke: #E7D84B;
  stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
  stroke: #EFEAC5;
  stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
  stroke: #1B8798;
  stroke-dashoffset: 35%;
}

@-webkit-keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Mansalva&display=swap" rel="stylesheet">

<h1> Hey World </h1>
<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="35%"
          class="text--line"
          >
      Hey
    </text>
    <text text-anchor="middle"
          x="50%"
          y="68%"
          class="text--line2"
          >
      World
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
  </g>
  
  
</svg>

我想知道为什么“Hey World”中“W”字母的中间笔划非常尖锐，因为它在原始字体中非常流畅 - 请参阅文本。

感谢任何提示

Answer 1

看起来尖线连接在字体上并不明显，因为它被正在填充的字体隐藏在动画轮廓不存在的地方。

如果您想更改它，请参阅 stroke-linejoin属性。