Question

我对SVG和动画非常陌生。我在线阅读了一些教程，我希望实现“绘图”图标的效果，以便获得加载图像： https://www.cassie.codes/posts/creating-my-logo-animation/#heading-svg-stroke-dasharray

我用自己的路径创建了一个Codepen。我将其应用于破折号数组，但其效果与教程中的效果不同，我也不明白为什么

SVG是从Avocode（由我的设计师设计）生成的。

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命令到最后的所有内容。删除的部分正在绘制“孔”

svg为什么dasharray无法正常工作

1 个答案: