如何为多个 SVG 元素设置不同的速度？在当前脚本中，它对父组下的所有路径和行应用speed = .5;<g id="World-On-Your-Plate">.
为了进一步简化和更好地控制，我将 SVG 的子元素分为以下几组，即<g id="World">，<g id="On-Your">后跟<g id="Plate">。
我想为子组<g id="On-Your">设置不同的速度，如speed = .3;，同时分别保持<g id="World">和<g id="Plate">的speed = .5;。
网页代码
<g id="World-On-Your-Plate">
<g id="World" stroke="#003668" stroke-width="1" fill="none">
<!--W-->
<line x1="8.427" y1="9.704" x2="9.47" y2="12.345" clip-path="url(#clip-path-47)" />
<line x1="9.192" y1="12.345" x2="10.212" y2="9.704" clip-path="url(#clip-path-46)" />
<line x1="9.331" y1="9.704" x2="10.374" y2="12.345" clip-path="url(#clip-path-45)" />
<line x1="10.096" y1="12.345" x2="11.115" y2="9.704" clip-path="url(#clip-path-44)" />
<!--O-->
<path d="M12.729,9.879a1.1,1.1,0,0,0-.811.348,1.22,1.22,0,0,0-.162,1.367.984.984,0,0,0,.973.6,1.05,1.05,0,0,0,1-.6,1.246,1.246,0,0,0-.163-1.367A1.082,1.082,0,0,0,12.729,9.879Z" transform="translate(0.009 0.01)" clip-path="url(#clip-path-43)" />
<!--R-->
<line x1="14.962" y1="9.704" x2="14.962" y2="12.345" clip-path="url(#clip-path-42)" />
<path d="M15.069,9.926h.394a.5.5,0,0,1,.556.533.519.519,0,0,1-.556.533h-.394" transform="translate(0.009 0.01)" clip-path="url(#clip-path-41)" />
<path d="M15,10.992h.509c.232,0,.6.857.788,1.089l.093.093c.093.046.394.162.394.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-40)" />
<!--L-->
<line x1="17.578" y1="9.704" x2="17.578" y2="12.345" clip-path="url(#clip-path-39)" />
<path d="M17.707,12.174h.9a.177.177,0,0,0,.116-.047.658.658,0,0,0,.093-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-38)" />
<!--D-->
<line x1="19.833" y1="9.704" x2="19.833" y2="12.345" clip-path="url(#clip-path-37)" />
<path d="M19.916,9.949h.626a1.107,1.107,0,0,1,.788.324,1.062,1.062,0,0,1,.3.765,1.089,1.089,0,0,1-.371.834,1.17,1.17,0,0,1-.765.3h-.579" transform="translate(0.009 0.01)" clip-path="url(#clip-path-36)" />
</g>
<g id="On-Your" stroke="#BDA484" stroke-width=".3" fill="none">
<!--O-->
<path d="M11.562,13.471a1.991,1.991,0,0,0-.741.812c-.441.857-.093.95-.093.95" transform="translate(0.009 0.01)" clip-path="url(#clip-path-35)" />
<path d="M10.658,15.21s.394.185,1.09-.788c.648-.927.069-.951.069-.951" transform="translate(0.009 0.01)" clip-path="url(#clip-path-34)" />
<path d="M11.91,13.518s-.209-.116-.533.255a.743.743,0,0,0-.186.556" transform="translate(0.009 0.01)" clip-path="url(#clip-path-33)" />
<!--N-->
<path d="M11.771,14.908a.419.419,0,0,1,.162-.185l.278-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-32)" />
<path d="M12.142,14.607a.6.6,0,0,1,.046.116,1.473,1.473,0,0,1-.325.51" transform="translate(0.009 0.01)" clip-path="url(#clip-path-31)" />
<path d="M12.1,15.047a1.971,1.971,0,0,1,.394-.324,2.939,2.939,0,0,1,.348-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-30)" />
<path d="M12.744,14.63s.07.047.023.3a.211.211,0,0,0,.093.209" transform="translate(0.009 0.01)" clip-path="url(#clip-path-29)" />
<path d="M12.79,15.117s.024.139.3-.116l.231-.232" transform="translate(0.009 0.01)" clip-path="url(#clip-path-28)" />
<!--Y-->
<path d="M14.539,14.028s-.116-.186.3-.371a2.484,2.484,0,0,1,.487-.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-27)" />
<path d="M15.165,13.518s.139.046-.279.741c-.394.672-.162.9-.162.9s.186.325,1.159-1.437" transform="translate(0.009 0.01)" clip-path="url(#clip-path-26)" />
<path d="M15.952,13.75s-.417.927-.533,1.274c-.417,1.344-.579,1.113-.579,1.113" transform="translate(0.009 0.01)" clip-path="url(#clip-path-25)" />
<path d="M14.949,16.19s-.341-.216.076-.772a6.522,6.522,0,0,1,1.09-.927" transform="translate(0.009 0.01)" clip-path="url(#clip-path-24)" />
<!--O-->
<path d="M15.893,14.885a1.748,1.748,0,0,1,.348-.278c.44-.209.463-.185.463-.185" transform="translate(0.009 0.01)" clip-path="url(#clip-path-23)" />
<path d="M16.768,14.5a.784.784,0,0,0-.556.278.28.28,0,0,0,.023.44" transform="translate(0.009 0.01)" clip-path="url(#clip-path-22)" />
<path d="M16.138,15.186s.218.186.494-.172a.3.3,0,0,0,.011-.434" transform="translate(0.009 0.01)" clip-path="url(#clip-path-21)" />
<!--U-->
<path d="M16.988,14.885a.487.487,0,0,1,.232-.208l.255-.14" transform="translate(0.009 0.01)" clip-path="url(#clip-path-20)" />
<path d="M17.384,14.561a.742.742,0,0,1-.116.3.258.258,0,0,0,0,.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-19)" />
<path d="M17.251,15.028s0,.29.4-.152A3.814,3.814,0,0,1,18.1,14.5" transform="translate(0.009 0.01)" clip-path="url(#clip-path-18)" />
<path d="M17.922,14.584s.139.069.024.278a.205.205,0,0,0,.09.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-17)" />
<!--R-->
<path d="M17.934,15.143s.058.035.5-.336c.139-.116.556-.417.556-.417" transform="translate(0.009 0.01)" clip-path="url(#clip-path-16)" />
<path d="M18.879,14.491s.162.116-.023.325c-.232.254-.051.35-.051.35" transform="translate(0.009 0.01)" clip-path="url(#clip-path-15)" />
<path d="M18.733,15.094s.05.274.42-.05c.139-.116.343-.266.343-.266" transform="translate(0.009 0.01)" clip-path="url(#clip-path-14)" />
</g>
<g id="Plate" stroke="#003668" stroke-width="1" fill="none">
<!--P-->
<line x1="9.793" y1="17.119" x2="9.793" y2="19.761" clip-path="url(#clip-path-13)" />
<path d="M9.893,17.318a4.2,4.2,0,0,1,.487.024.558.558,0,0,1,.533.579.551.551,0,0,1-.209.463.708.708,0,0,1-.463.163,2.584,2.584,0,0,1-.325-.047" transform="translate(0.009 0.01)" clip-path="url(#clip-path-12)" />
<!--L-->
<line x1="12.155" y1="17.119" x2="12.155" y2="19.761" clip-path="url(#clip-path-11)" />
<path d="M12.288,19.59a4.91,4.91,0,0,0,.834,0c.14-.024.325-.255.325-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-10)" />
<!--A-->
<line x1="14.049" y1="19.761" x2="15.139" y2="17.119" clip-path="url(#clip-path-9)" />
<line x1="14.927" y1="17.398" x2="15.969" y2="19.785" clip-path="url(#clip-path-8)" />
<line x1="14.476" y1="18.881" x2="15.449" y2="18.881" clip-path="url(#clip-path-7)" />
<!--T-->
<line x1="16.283" y1="17.328" x2="18.276" y2="17.328" clip-path="url(#clip-path-6)" />
<line x1="17.242" y1="17.328" x2="17.242" y2="19.785" clip-path="url(#clip-path-5)" />
<!--E-->
<line x1="19.238" y1="17.119" x2="19.238" y2="19.761" clip-path="url(#clip-path-4)" />
<line x1="19.389" y1="17.328" x2="20.362" y2="17.328" clip-path="url(#clip-path-3)" />
<line x1="19.38" y1="18.339" x2="20.168" y2="18.339" clip-path="url(#clip-path-2)" />
<path d="M19.38,19.59h.788a.438.438,0,0,0,.162-.047c.093-.092.232-.208.232-.208" transform="translate(0.009 0.01)" clip-path="url(#clip-path-1)" />
</g>
</g>
CSS代码
#World * {
animation: letter-animation .7s linear forwards;
animation-timing-function: ease-in-out;
}
#On-Your * {
animation: letter-animation .5s linear forwards;
animation-timing-function: ease-in-out;
}
#Plate * {
animation: letter-animation .7s linear forwards;
animation-timing-function: ease-in-out;
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
JQuery Code
let woyp = document.querySelector("#World-On-Your-Plate")
let shapes = woyp.querySelectorAll("g line, g path");
let speed = .5;
shapes.forEach((s, i) => {
let totalLength = s.getTotalLength();
s.setAttribute("stroke-dasharray", totalLength);
s.setAttribute("stroke-dashoffset", totalLength);
s.setAttribute("style", `animation-delay:${i*speed}s`)
})
代码笔： https://codepen.io/ToxifiedM/pen/MWKeERr
原始问题：如何使SVG文本动画无缝准确？
链接问题 1：SVG 的 JQuery 函数，一旦第一个动画完成，就执行第二个动画？
链接问题2：使用jquery控制基于SVG CSS的动画？
在这种情况下，我不是将speed的值设置为全局变量，而是计算每个形状的速度。
对于延迟，我使用全局变量let delay = 0;然后递增 forEach：delay += Number(speed);中的延迟值
对于 svg 中的速度，我使用data-speed属性，并且每个形状都let speed = s.parentNode.dataset.speed;
let svg = document.querySelector("svg")
let woyp = document.querySelector("#World-On-Your-Plate")
let shapes = woyp.querySelectorAll("g line, g path");
let delay = 0;
shapes.forEach((s, i) => {
let totalLength = s.getTotalLength();
let speed = s.parentNode.dataset.speed;
delay += Number(speed);
s.setAttribute("stroke-dasharray", totalLength);
s.setAttribute("stroke-dashoffset", totalLength);
s.setAttribute("style", `animation-duration:${speed}s;animation-delay:${delay}s`)
})#World-On-Your-Plate * {
animation-name: letter-animation;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
svg{width:90vh}<svg viewBox="8 8 15 15">
<g id="World-On-Your-Plate" >
<g id="World" stroke="#003668" stroke-width="1" fill="none" data-speed=".7">
<!--W-->
<line x1="8.427" y1="9.704" x2="9.47" y2="12.345" clip-path="url(#clip-path-47)" />
<line x1="9.192" y1="12.345" x2="10.212" y2="9.704" clip-path="url(#clip-path-46)" />
<line x1="9.331" y1="9.704" x2="10.374" y2="12.345" clip-path="url(#clip-path-45)" />
<line x1="10.096" y1="12.345" x2="11.115" y2="9.704" clip-path="url(#clip-path-44)" />
<!--O-->
<path d="M12.729,9.879a1.1,1.1,0,0,0-.811.348,1.22,1.22,0,0,0-.162,1.367.984.984,0,0,0,.973.6,1.05,1.05,0,0,0,1-.6,1.246,1.246,0,0,0-.163-1.367A1.082,1.082,0,0,0,12.729,9.879Z" transform="translate(0.009 0.01)" clip-path="url(#clip-path-43)" />
<!--R-->
<line x1="14.962" y1="9.704" x2="14.962" y2="12.345" clip-path="url(#clip-path-42)" />
<path d="M15.069,9.926h.394a.5.5,0,0,1,.556.533.519.519,0,0,1-.556.533h-.394" transform="translate(0.009 0.01)" clip-path="url(#clip-path-41)" />
<path d="M15,10.992h.509c.232,0,.6.857.788,1.089l.093.093c.093.046.394.162.394.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-40)" />
<!--L-->
<line x1="17.578" y1="9.704" x2="17.578" y2="12.345" clip-path="url(#clip-path-39)" />
<path d="M17.707,12.174h.9a.177.177,0,0,0,.116-.047.658.658,0,0,0,.093-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-38)" />
<!--D-->
<line x1="19.833" y1="9.704" x2="19.833" y2="12.345" clip-path="url(#clip-path-37)" />
<path d="M19.916,9.949h.626a1.107,1.107,0,0,1,.788.324,1.062,1.062,0,0,1,.3.765,1.089,1.089,0,0,1-.371.834,1.17,1.17,0,0,1-.765.3h-.579" transform="translate(0.009 0.01)" clip-path="url(#clip-path-36)" />
</g>
<g id="On-Your" stroke="#BDA484" stroke-width=".5" fill="none" data-speed=".1">
<!--O-->
<path d="M11.562,13.471a1.991,1.991,0,0,0-.741.812c-.441.857-.093.95-.093.95" transform="translate(0.009 0.01)" clip-path="url(#clip-path-35)" />
<path d="M10.658,15.21s.394.185,1.09-.788c.648-.927.069-.951.069-.951" transform="translate(0.009 0.01)" clip-path="url(#clip-path-34)" />
<path d="M11.91,13.518s-.209-.116-.533.255a.743.743,0,0,0-.186.556" transform="translate(0.009 0.01)" clip-path="url(#clip-path-33)" />
<!--N-->
<path d="M11.771,14.908a.419.419,0,0,1,.162-.185l.278-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-32)" />
<path d="M12.142,14.607a.6.6,0,0,1,.046.116,1.473,1.473,0,0,1-.325.51" transform="translate(0.009 0.01)" clip-path="url(#clip-path-31)" />
<path d="M12.1,15.047a1.971,1.971,0,0,1,.394-.324,2.939,2.939,0,0,1,.348-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-30)" />
<path d="M12.744,14.63s.07.047.023.3a.211.211,0,0,0,.093.209" transform="translate(0.009 0.01)" clip-path="url(#clip-path-29)" />
<path d="M12.79,15.117s.024.139.3-.116l.231-.232" transform="translate(0.009 0.01)" clip-path="url(#clip-path-28)" />
<!--Y-->
<path d="M14.539,14.028s-.116-.186.3-.371a2.484,2.484,0,0,1,.487-.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-27)" />
<path d="M15.165,13.518s.139.046-.279.741c-.394.672-.162.9-.162.9s.186.325,1.159-1.437" transform="translate(0.009 0.01)" clip-path="url(#clip-path-26)" />
<path d="M15.952,13.75s-.417.927-.533,1.274c-.417,1.344-.579,1.113-.579,1.113" transform="translate(0.009 0.01)" clip-path="url(#clip-path-25)" />
<path d="M14.949,16.19s-.341-.216.076-.772a6.522,6.522,0,0,1,1.09-.927" transform="translate(0.009 0.01)" clip-path="url(#clip-path-24)" />
<!--O-->
<path d="M15.893,14.885a1.748,1.748,0,0,1,.348-.278c.44-.209.463-.185.463-.185" transform="translate(0.009 0.01)" clip-path="url(#clip-path-23)" />
<path d="M16.768,14.5a.784.784,0,0,0-.556.278.28.28,0,0,0,.023.44" transform="translate(0.009 0.01)" clip-path="url(#clip-path-22)" />
<path d="M16.138,15.186s.218.186.494-.172a.3.3,0,0,0,.011-.434" transform="translate(0.009 0.01)" clip-path="url(#clip-path-21)" />
<!--U-->
<path d="M16.988,14.885a.487.487,0,0,1,.232-.208l.255-.14" transform="translate(0.009 0.01)" clip-path="url(#clip-path-20)" />
<path d="M17.384,14.561a.742.742,0,0,1-.116.3.258.258,0,0,0,0,.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-19)" />
<path d="M17.251,15.028s0,.29.4-.152A3.814,3.814,0,0,1,18.1,14.5" transform="translate(0.009 0.01)" clip-path="url(#clip-path-18)" />
<path d="M17.922,14.584s.139.069.024.278a.205.205,0,0,0,.09.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-17)" />
<!--R-->
<path d="M17.934,15.143s.058.035.5-.336c.139-.116.556-.417.556-.417" transform="translate(0.009 0.01)" clip-path="url(#clip-path-16)" />
<path d="M18.879,14.491s.162.116-.023.325c-.232.254-.051.35-.051.35" transform="translate(0.009 0.01)" clip-path="url(#clip-path-15)" />
<path d="M18.733,15.094s.05.274.42-.05c.139-.116.343-.266.343-.266" transform="translate(0.009 0.01)" clip-path="url(#clip-path-14)" />
</g>
<g id="Plate" stroke="#003668" stroke-width="1" fill="none" data-speed=".7">
<!--P-->
<line x1="9.793" y1="17.119" x2="9.793" y2="19.761" clip-path="url(#clip-path-13)" />
<path d="M9.893,17.318a4.2,4.2,0,0,1,.487.024.558.558,0,0,1,.533.579.551.551,0,0,1-.209.463.708.708,0,0,1-.463.163,2.584,2.584,0,0,1-.325-.047" transform="translate(0.009 0.01)" clip-path="url(#clip-path-12)" />
<!--L-->
<line x1="12.155" y1="17.119" x2="12.155" y2="19.761" clip-path="url(#clip-path-11)" />
<path d="M12.288,19.59a4.91,4.91,0,0,0,.834,0c.14-.024.325-.255.325-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-10)" />
<!--A-->
<line x1="14.049" y1="19.761" x2="15.139" y2="17.119" clip-path="url(#clip-path-9)" />
<line x1="14.927" y1="17.398" x2="15.969" y2="19.785" clip-path="url(#clip-path-8)" />
<line x1="14.476" y1="18.881" x2="15.449" y2="18.881" clip-path="url(#clip-path-7)" />
<!--T-->
<line x1="16.283" y1="17.328" x2="18.276" y2="17.328" clip-path="url(#clip-path-6)" />
<line x1="17.242" y1="17.328" x2="17.242" y2="19.785" clip-path="url(#clip-path-5)" />
<!--E-->
<line x1="19.238" y1="17.119" x2="19.238" y2="19.761" clip-path="url(#clip-path-4)" />
<line x1="19.389" y1="17.328" x2="20.362" y2="17.328" clip-path="url(#clip-path-3)" />
<line x1="19.38" y1="18.339" x2="20.168" y2="18.339" clip-path="url(#clip-path-2)" />
<path d="M19.38,19.59h.788a.438.438,0,0,0,.162-.047c.093-.092.232-.208.232-.208" transform="translate(0.009 0.01)" clip-path="url(#clip-path-1)" />
</g>
</g>
</svg>