SVG 动画 - 如何反转此 svg 路径中的起点和终点?

Question

所以我正在为图标创建某种小动画。我想坚持svg，因为它们只是一些小的线条动画。

.svg位于 html 文档中。css 具有线条和动画的样式。

https://jsfiddle.net/pd9ux6e7/

所以现在我得到了什么。我得到了这条画线，就像我想要的那样。唯一困扰我的是动画开始和结束的方式。现在它从右下角到左上角。但我想从左上到右下(就像你阅读的方式一样，从左到右感觉更自然(

知道我该如何解决这个问题吗？我认为它在 svg 路径中的某个地方，但不知道这些值代表什么。这是 svg<path class="st3" d="M1194.1,777.2H7c-2.8,0-5-2.2-5-5V35.9" />中的蓝线

Answer 1

我已经反转了路径，这反转了动画。路径的长度也是 1932 年，所以在 css 中我改用这个值。

.st0 {
fill: #ffffff;
}
.st1 {
fill: none;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st2 {
fill: #ffffff;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #2646ff;
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#Streep .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: 0;
animation: dash 8s ease-in-out;
animation-direction: reverse;
}
@keyframes dash {
to {
stroke-dashoffset: 1932;
}
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 780" style="enable-background:new 0 0 1200 780;" xml:space="preserve">
<g id="Layer_1"></g>
<g id="Layer_6">
<g>
<g>
<path
class="st0"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
<path
class="st1"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
</g>
<line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
<ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
</g>
</g>
<g id="Layer_5">
<g>
<g>
<path
class="st0"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
</g>
</g>
<g id="Layer_4">
<g>
<g>
<path
class="st0"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
</g>
</g>
<g id="Streep">
<g>
<path class="st3" d="M2,35.9L2,772.2 C2,775 4.2,777.2 7,777.2 L1194.1,777.2" />
</g>
</g>
</svg>

Answer 2

无需反转路径定义。 只需反转破折号偏移动画即可。

#Streep .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: -1932;
animation: dash 8s ease-in-out;
animation-direction: forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}

这在大多数浏览器中都有效，但不幸的是不适用于 Safari，它有一个不接受负破折号偏移的错误。

要解决此问题，只需将破折号偏移量值向上移动(破折号长度 + 破折号间隙(= 1932 + 1932 = 3864。

#Streep .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: 1932;
animation: dash 8s ease-in-out;
animation-direction: forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 3864;
}
}

结果：

svg { width: 500px; }
.st0 {
fill: #ffffff;
}
.st1 {
fill: none;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st2 {
fill: #ffffff;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #2646ff;
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#Streep .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: 1932;
animation: dash 8s ease-in-out;
animation-direction: forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 3864;
}
}

<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 1200 780"
style="enable-background:new 0 0 1200 780;"
xml:space="preserve"
>
<g id="Layer_1"></g>
<g id="Layer_6">
<g>
<g>
<path
class="st0"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
<path
class="st1"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
</g>
<line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
<ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
</g>
</g>
<g id="Layer_5">
<g>
<g>
<path
class="st0"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
</g>
</g>
<g id="Layer_4">
<g>
<g>
<path
class="st0"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
</g>
</g>
<g id="Streep">
<g>
<path class="st3" d="M1194.1,777.2H7c-2.8,0-5-2.2-5-5V35.9" />
</g>
</g>
</svg>