在左边的例子中，路径是连续的（即没有m命令），因此路径的段被一个接一个地绘制。
在右侧示例中，路径是不连续的（即包含m命令），这会导致一次绘制所有段。
如何使正确示例中的线段一个接一个地绘制？
也就是说，只有在最上面的笔画完成时才开始第二笔画，而不是同时开始。
<svg width="220px" height="100px" viewBox="-10 -10 240 120">
<style>
path{stroke-dasharray:500;stroke-dashoffset:500;fill:none;stroke:#000;stroke-width:6px;animation:draw 5s linear infinite;}
@keyframes draw{to{stroke-dashoffset:0;}}
</style>
<path d="m0,0 h60 v60 h-60 z" />
<path d="m120,0 h60 m-60,20 h60 m-60,20 h60 m-60,20 h60 m-60,20" />
</svg>是否可以使用CSS反转列表？也就是说,没有 javascript.
这是来源:
<!DOCTYPE html>
<html>
<head>
<title>Reversed List</title>
<style type="text/css">
ol.reverse li { /* what goes here? */ }
</style>
</head>
<body>
<ol class="reverse">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
这应该是结果:
(当谷歌搜索总是出现关于编号的问题,以及如何在HTML中显示反向排序的列表？看起来它也是关于编号的,即使我现在看到答案不是.)