我试图用我制作的svg动画一个单词。这个词写的本身但方向错误（从单词的结尾开始，在开头结束）。我可以控制动画的方向吗？
@keyframes offset{
100%{
stroke-dashoffset:0;
}
}
.motEpicerie{ stroke:#000; stroke-width:3px;
stroke-dasharray:984;
stroke-dashoffset:984;
animation:offset 4s linear forwards;
}<svg version="1.1" id="Layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewBox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667" xml:space="preserve">
<g>
<path class="motEpicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527L93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262L30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 C31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08"/>
</g>
</svg>
https://jsfiddle.net/piieell/jo1ern3r/
谢谢！
答案 0 :(得分：3)
只需将stroke-dashoffset反转为负值。
当然，最明显的解决方案是简单地以正确的方向重写路径。预先计划就是一切。：）
.motEpicerie {
stroke: #000;
stroke-width: 3px;
stroke-dasharray: 984;
stroke-dashoffset: -984;
animation: offset 4s linear forwards;
}
@keyframes offset {
100% {
stroke-dashoffset: 0;
}
}
.motEpicerie {
stroke: #000;
stroke-width: 3px;
stroke-dasharray: 984;
stroke-dashoffset: -984;
animation: offset 4s linear forwards;
}<svg version="1.1" id="Layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewBox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667"
xml:space="preserve">
<g>
<path class="motEpicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527L93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262L30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 C31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08"
/>
</g>
</svg>
答案 1 :(得分：0)
您必须颠倒路径上的点的顺序。
你的路径非常复杂，有很多分数，因此可能更难区分点并重新排序。
这是一个对我有用的简单例子。 （只是改变折线点的顺序）
旧路径/代码：
.st2{fill:none;stroke:#2D3E99;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.g {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 230.2 173.4" style="enable-background:new 0 0 230.2 173.4;" xml:space="preserve">
<polyline class="st2 g" points="163.8,65.5 116.2,83.2 47,59.1 6.5,45 113.8,6.5 223.7,45.3 188.3,56.8 "/>
</svg>
新路径/代码：
.st2{fill:none;stroke:#2D3E99;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.g {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 230.2 173.4" style="enable-background:new 0 0 230.2 173.4;" xml:space="preserve">
<polyline class="st2 g" points="188.3,56.8 223.7,45.3 113.8,6.5 6.5,45 47,59.1 116.2,83.2 163.8,65.5"/>
</svg>
如果有一个工具可以通过
重新排序点，那将会很好