SVG的JQuery函数，在第一个动画完成后立即执行第二个动画吗? [英] A JQuery function for SVG, to execute 2nd animation as soon as, 1st animation completes?
本文介绍了SVG的JQuery函数，在第一个动画完成后立即执行第二个动画吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我应用了动画延迟技术，但是要获得手写效果动画，我必须在与对象相交的任何地方都对其进行剪切，并绘制路径并将其转换为剪贴蒙版，例如字母"W"分为4个部分，并针对上述不同部分绘制了不同的路径，并对其进行动画处理，以提供清晰的手写效果，并为路径提供笔划宽度，由于字体过于复杂，我花了很多时间
目前，我正在使用动画延迟CSS函数来实现上述动画.
CSS代码
#W2-Path {
animation-delay: .5s
}
#W3-Path {
animation-delay: 1s
}
#W4-Path {
animation-delay: 1.5s
}
#O-Path {
animation-delay: 2s
}
#R1-Path-2 {
animation-delay: 3.5s
}
#R2-Path-2 {
animation-delay: 4s
}
#R3-Path-2 {
animation-delay: 4.5s
}
#L1-Path-2 {
animation-delay: 5s
}
#L2-Path-2 {
animation-delay: 5.5s
}
#L3-Path-2 {
animation-delay: 6s
}
#D1-Path {
animation-delay: 6.5s
}
#D2-Path {
animation-delay: 7s
}
我在考虑是否还有其他方法可以在第一个动画完成时启动第二个动画，而它只是继续为动画提供更平滑的效果和完美的时机，实现JQuery?
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
原始问题:如何使SVG文本动画无缝且准确?
链接的问题1:使用Jquery控制基于SVG CSS的动画?
链接的问题2:使用Jquery控制多个SVG元素的速度?
解决方案
我只回答后一个W
我已经更改了您的svg代码，因为它可以通过更简单的方式来完成.
您将每行分成2组.我只用线.另外，您正在使用style="clip-path: url(#clip-path)"，我已将其转换为表示形式的属性，如下所示:clip-path="url(#clip-path)"因为在javascript中我想将animation-delay设置为行的内联样式.
另一个变化:我使用stroke-dasharray: 8和stroke-dashoffset: 8，因为8是字母W的行的长度.我知道行的长度，因为我已经使用过getTotalLength()方法./p>
由于字母的行具有相同的样式，因此仅对组设置一次stroke和stroke-width.
javascript正在选择组中的所有行，然后遍历各行并设置animation-delay:${i*1}s，其中i是第n行.请注意，该行在组中的顺序是从第一到第四，而不是相反，因为您在代码中有它们.
let Wls = document.querySelector("#W").querySelectorAll("line");//all the lines in the W group
Wls.forEach((l,i)=>{
// for each line in the W group
// set the style attribute
l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
background: white;
}
svg {
width: 90vh;
border:solid;
}
#W line{
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
@keyframes letter-animation {
0% {
stroke-dashoffset: 8;
}
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 9 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
<path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
</clipPath>
<clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
<path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
<path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
</clipPath>
</defs>
<g id="W" stroke="#003668" stroke-width="2">
<line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
<line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
<line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
<line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
</g>
</svg>
更新
OP正在评论:
因此，当我实际尝试实现它时，我遇到了字母"O"，它的路径不是一行，我尝试了您的方法，它没有出现在路径中，对于任何线索该怎么办?/p>
在这种情况下，您必须为路径设置动画.这次您不需要其他的CSS动画，并且由于stroke-dashoffset的最终值为0，因此您不需要其他的动画.但是，您需要计算路径的总长度，才能将其用于路径的stroke-dasharray和stroke-dashoffse.在这种情况下为20.4.
let Wls = document.querySelector("#W").querySelectorAll("line")
Wls.forEach((l,i)=>{
l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
background: white;
}
svg {
width: 90vh;
border:solid;
overflow:visible;
}
#W line{
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
#O path{
stroke-dasharray: 20.4;
stroke-dashoffset: 20.4;
animation: letter-animation 1s linear forwards;
animation-delay:4.5s
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 29 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
<path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
</clipPath>
<clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
<path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
<path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
</clipPath>
<clipPath id="clip-path-43">
<path id="clipO" d="M22.38,14.637v.026h0v.081l0,.023a3.231,3.231,0,0,1-.367,1.385,3.556,3.556,0,0,1-.9,1.089,3.814,3.814,0,0,1-1.2.655,3.724,3.724,0,0,1-1.289.2,3.869,3.869,0,0,1-1.4-.3,3.818,3.818,0,0,1-1.169-.756,3.474,3.474,0,0,1-.791-1.133A3.228,3.228,0,0,1,15,14.763v-.119h0v-.022h0V14.6h0v-.047h0v-.024h0V14.38a3.256,3.256,0,0,1,.273-1.138,3.554,3.554,0,0,1,.756-1.109,3.749,3.749,0,0,1,2.8-1.073,4.05,4.05,0,0,1,1.265.257A3.668,3.668,0,0,1,21.241,12a3.433,3.433,0,0,1,.836,1.113,3.107,3.107,0,0,1,.3,1.237l0,.021v.131h0v.025h0v.025h0v.052h0v.025ZM21.265,14.4a3.982,3.982,0,0,0-.18-1.025,2.913,2.913,0,0,0-.529-.99,2.287,2.287,0,0,0-.821-.628,2.492,2.492,0,0,0-1.043-.218,2.667,2.667,0,0,0-1.038.2,2.42,2.42,0,0,0-.826.569,2.593,2.593,0,0,0-.549.905,3.436,3.436,0,0,0-.2,1.085v.232h0v.024h0V14.6h0v.024h0v.023h0v.025l0,.023v.027a3.52,3.52,0,0,0,.228,1.105,2.93,2.93,0,0,0,.615.98,2.5,2.5,0,0,0,1.778.762,2.549,2.549,0,0,0,1.023-.2,2.313,2.313,0,0,0,.811-.584,2.739,2.739,0,0,0,.534-.915,3.439,3.439,0,0,0,.188-1.021v-.185h0v-.044h0V14.6h0v-.022h0v-.022h0v-.022h0v-.022h0V14.4Z" />
</clipPath>
</defs>
<g id="W" stroke="#003668" stroke-width="2">
<line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
<line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
<line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
<line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
</g>
<g id="O" stroke="#003668" stroke-width="2" fill="none">
<path id="OPath" d="M18.657,11.3a3.1,3.1,0,0,0-2.289.981,3.448,3.448,0,0,0-.458,3.858,2.78,2.78,0,0,0,2.747,1.7,2.961,2.961,0,0,0,2.813-1.7,3.514,3.514,0,0,0-.458-3.858A3.055,3.055,0,0,0,18.657,11.3Z" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-43)" />
</g>
</svg>
I applied the animation-delay technique, but to achieve a the handwriting effect animation, I had to cut the object wherever it intersects, and drew a path and converted it to a clipping mask, e.g. letter "W" divided into 4 parts and drew different paths for different part for the said above, and animating it, to give a clean handwriting effect, giving path a stroke width, It took me a lot more time as the font was too complicated.
Currently I am achieving the said animation using animation-delay, CSS function.
CSS Code
#W2-Path {
animation-delay: .5s
}
#W3-Path {
animation-delay: 1s
}
#W4-Path {
animation-delay: 1.5s
}
#O-Path {
animation-delay: 2s
}
#R1-Path-2 {
animation-delay: 3.5s
}
#R2-Path-2 {
animation-delay: 4s
}
#R3-Path-2 {
animation-delay: 4.5s
}
#L1-Path-2 {
animation-delay: 5s
}
#L2-Path-2 {
animation-delay: 5.5s
}
#L3-Path-2 {
animation-delay: 6s
}
#D1-Path {
animation-delay: 6.5s
}
#D2-Path {
animation-delay: 7s
}
I was thinking if there is any other way through which I can start the 2nd animation as the 1st animation completes, and it just keeps going on giving the animation more smoother effect and perfect timing, implementing JQuery?
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
Original Question: How Can I Make SVG Text Animation Seamless And Accurate?
Linked Question 1: To Control SVG CSS Based Animation Using Jquery?
Linked Question 2: To Control The Speed Of Multiple SVG Elements Using Jquery?
解决方案
I'm answering only for the latter W
I've changed the svg code you have, because it can be done in a more simple way.
You are wrapping every line in 2 groups. I'm using just the lines. Also you are using style="clip-path: url(#clip-path)" I've transformed this to a presentational attribute like so: clip-path="url(#clip-path)" because in javascript I want to set the animation-delay as inline style for the lines.
An other change: I'm using stroke-dasharray: 8 and stroke-dashoffset: 8 since 8 is the length of the lines for the letter W. I know the length of the lines because I've used the getTotalLength() method.
The stroke and the stroke-width are set only once for the group since the lines for the letter have the same style.
The javascript is selecting all the lines in a group and then is looping through the lines and setting the animation-delay:${i*1}s where i is the nth line. Please observe that the order of the lines in the group is from the first to the 4-th and not vice versa as you have them in your code.
let Wls = document.querySelector("#W").querySelectorAll("line");//all the lines in the W group
Wls.forEach((l,i)=>{
// for each line in the W group
// set the style attribute
l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
background: white;
}
svg {
width: 90vh;
border:solid;
}
#W line{
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
@keyframes letter-animation {
0% {
stroke-dashoffset: 8;
}
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 9 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
<path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
</clipPath>
<clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
<path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
<path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
</clipPath>
</defs>
<g id="W" stroke="#003668" stroke-width="2">
<line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
<line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
<line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
<line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
</g>
</svg>
UPDATE
The OP is commenting:
So when I was actually trying to implement it, I got on the letter "O", its a path not a line, I tried your method, its not appearing for path, what can be done for that any clue?
In this case you'll have to animate the path. This time you don't need a different css animation and since the final value for the stroke-dashoffset is 0 you don't need a different animation. However you'll need to calculate the path's total length to use it for the path's stroke-dasharray and stroke-dashoffse. In this case is 20.4.
let Wls = document.querySelector("#W").querySelectorAll("line")
Wls.forEach((l,i)=>{
l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
background: white;
}
svg {
width: 90vh;
border:solid;
overflow:visible;
}
#W line{
stroke-dasharray: 8;
stroke-dashoffset: 8;
animation: letter-animation 1s linear forwards;
}
#O path{
stroke-dasharray: 20.4;
stroke-dashoffset: 20.4;
animation: letter-animation 1s linear forwards;
animation-delay:4.5s
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
<svg id="WOYP" viewBox="0 0 29 9">
<defs>
<clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
<path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
<path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
</clipPath>
<clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
<path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
</clipPath>
<clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
<path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
</clipPath>
<clipPath id="clip-path-43">
<path id="clipO" d="M22.38,14.637v.026h0v.081l0,.023a3.231,3.231,0,0,1-.367,1.385,3.556,3.556,0,0,1-.9,1.089,3.814,3.814,0,0,1-1.2.655,3.724,3.724,0,0,1-1.289.2,3.869,3.869,0,0,1-1.4-.3,3.818,3.818,0,0,1-1.169-.756,3.474,3.474,0,0,1-.791-1.133A3.228,3.228,0,0,1,15,14.763v-.119h0v-.022h0V14.6h0v-.047h0v-.024h0V14.38a3.256,3.256,0,0,1,.273-1.138,3.554,3.554,0,0,1,.756-1.109,3.749,3.749,0,0,1,2.8-1.073,4.05,4.05,0,0,1,1.265.257A3.668,3.668,0,0,1,21.241,12a3.433,3.433,0,0,1,.836,1.113,3.107,3.107,0,0,1,.3,1.237l0,.021v.131h0v.025h0v.025h0v.052h0v.025ZM21.265,14.4a3.982,3.982,0,0,0-.18-1.025,2.913,2.913,0,0,0-.529-.99,2.287,2.287,0,0,0-.821-.628,2.492,2.492,0,0,0-1.043-.218,2.667,2.667,0,0,0-1.038.2,2.42,2.42,0,0,0-.826.569,2.593,2.593,0,0,0-.549.905,3.436,3.436,0,0,0-.2,1.085v.232h0v.024h0V14.6h0v.024h0v.023h0v.025l0,.023v.027a3.52,3.52,0,0,0,.228,1.105,2.93,2.93,0,0,0,.615.98,2.5,2.5,0,0,0,1.778.762,2.549,2.549,0,0,0,1.023-.2,2.313,2.313,0,0,0,.811-.584,2.739,2.739,0,0,0,.534-.915,3.439,3.439,0,0,0,.188-1.021v-.185h0v-.044h0V14.6h0v-.022h0v-.022h0v-.022h0v-.022h0V14.4Z" />
</clipPath>
</defs>
<g id="W" stroke="#003668" stroke-width="2">
<line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
<line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
<line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
<line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
</g>
<g id="O" stroke="#003668" stroke-width="2" fill="none">
<path id="OPath" d="M18.657,11.3a3.1,3.1,0,0,0-2.289.981,3.448,3.448,0,0,0-.458,3.858,2.78,2.78,0,0,0,2.747,1.7,2.961,2.961,0,0,0,2.813-1.7,3.514,3.514,0,0,0-.458-3.858A3.055,3.055,0,0,0,18.657,11.3Z" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-43)" />
</g>
</svg>
这篇关于SVG的JQuery函数，在第一个动画完成后立即执行第二个动画吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
