html - svg 为什么 dasharray 没有按预期工作

Question

我是 SVG 和动画方面的新手。我在网上看了一些教程，想实现一个“绘图”图标效果，以便有一个加载图像: https://www.cassie.codes/posts/creating-my-logo-animation/#heading-svg-stroke-dasharray

我已经用我的路径创建了一个代码笔。我向它应用了一个 dasharray，但它的效果与教程中的效果不一样，我不明白为什么

SVG 是从 Avocode 生成的(来 self 的设计师的设计)。

https://codepen.io/JeromeLam/pen/pooYPwp

<svg xmlns="http://www.w3.org/2000/svg">
  <path class="test2" fill="#fe5915" d="M12.17 43.373H1.756A1.036 1.036 0 01.72 42.337V15.915c0-.28.112-.547.313-.742L16.008.592c.193-.189.452-.294.723-.294h10.416a1.036 1.036 0 110 2.072h-9.995L2.792 16.352V41.3h9.379a1.036 1.036 0 010 2.073z"/>
  <g>
    <path class="test3" fill="#fe5915" d="M27.597 36.145c-3.477 0-6.742-1.138-8.734-3.044a1.036 1.036 0 111.433-1.497c1.615 1.546 4.345 2.468 7.301 2.468 2.977 0 5.716-.932 7.328-2.493a1.036 1.036 0 011.441 1.49c-1.989 1.926-5.267 3.076-8.769 3.076z"/>
  </g>
  <g>
    <path class="test4" stroke="000000" stroke-width="4" d="M13.207 16.243l13.94-13.572 13.94 13.572v24.948h-27.88zm29.952 25.984V15.806c0-.28-.113-.547-.313-.742L27.87.483a1.036 1.036 0 00-1.446 0l-14.976 14.58a1.04 1.04 0 00-.314.743v26.421c0 .573.464 1.036 1.037 1.036h29.952c.572 0 1.036-.463 1.036-1.036z"/>
  </g>
</svg>

CSS:

path.test4 {
  stroke-dasharray: 20;
}

Answer 1

正如我评论过的:您的路径是一条复杂的路径，中间有一个洞。你看到的是充满黑色的路径。您看不到破折号，因为您看到的是填充。为了看到破折号，您可能需要像这样简化路径:

path.test4 {
  stroke-dasharray: 20;
}

<svg xmlns="http://www.w3.org/2000/svg">
    <path class="test4" stroke="#000000" fill="none" stroke-width="4" d="M13.207 16.243l13.94-13.572 13.94 13.572v24.948h-27.88z"/>
</svg>

我使用的 d 属性是您拥有的第一部分。我删除了从 m 命令到最后的所有内容。删除的部分正在绘制“孔”