html - 为什么在我的代码笔上，“W”字母的中间笔画非常尖锐？

这里是演示：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>

我想知道为什么“ W”字母的中风在“ Hey World”中会非常尖锐，因为它的原始字体非常平滑-请参见文本。

谢谢你的提示

最佳答案

看起来尖尖的线条连接在字体上并不明显，因为它被隐藏在动画轮廓未填充的位置的字体隐藏了。

如果要更改它，请参见stroke-linejoin属性。

关于html - 为什么在我的代码笔上，“W”字母的中间笔画非常尖锐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58097130/