How to control the animation speed for multiple SVG elements using jQuery?

问题

How can I set varied speed for multiple SVG elements? In the current script it's applying speed = .5; for all the paths and lines that are under the parent group <g id="World-On-Your-Plate">.

For further simplification and better control I have divided the child elements of the SVG into the following groups i.e. <g id="World">, <g id="On-Your"> followed by <g id="Plate">.

I want to set a different speed for the child group <g id="On-Your">, as speed = .3;, while keeping it speed = .5; as it is for the <g id="World"> and <g id="Plate"> respectively.

HTML Code

<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 Code

#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`)
})

CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr

Original Question: How Can I Make SVG Text Animation Seamless And Accurate?

Linked Question 1: A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?

Linked Question 2: To Control SVG CSS Based Animation Using Jquery?

回答1:

In this case instead of setting the value of speed as a global variable I'm calculating the speed for every shape.

For the delay I am using a global variable let delay = 0; and then I'm incrementing the value of the delay in the forEach: delay += Number(speed);

For the speed in the svg I'm using a data-speed attribute and for each shape 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>

来源：https://stackoverflow.com/questions/62374719/how-to-control-the-animation-speed-for-multiple-svg-elements-using-jquery

标签

html

jquery

css

svg

svg-animate