我是 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;
}
最佳答案
正如我评论过的:您的路径是一条复杂的路径,中间有一个洞。你看到的是充满黑色的路径。您看不到破折号,因为您看到的是填充。为了看到破折号,您可能需要像这样简化路径:
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
命令到最后的所有内容。删除的部分正在绘制“孔”
关于html - svg 为什么 dasharray 没有按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58963667/