如何使用 JQuery 控制基于 CSS 的 SVG 动画？

Posted 2023-05-08

技术标签:

【中文标题】如何使用 JQuery 控制基于 CSS 的 SVG 动画？【英文标题】：How to control the SVG animation which is based in CSS using JQuery? 【发布时间】：2020-10-03 04:27:00 【问题描述】：

我想完全同步 svg 动画，被初始化多个变量卡住了，许多组既有路径又有线条，我想让它按照顺序，它只是在我前面，我只是为字母“W”做的，并希望完全初始化 O、R、L、D 和所有其他变量，以便它一个接一个地动画，或者你有更好的方法来做同样的事情。

html 代码

<g id="W-World" stroke="#003668" stroke- fill="none">
    <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>

JQuery 代码

let W = document.querySelector("#W-World").querySelectorAll("line")

W.forEach((l, i) => 
    l.setAttribute("style", `animation-delay:$i*1s`)
)

主要是在 W 完全加载后，我想为 O 启动动画，然后为 R 等其他字母启动动画，因为有些组既有线条又有路径，所以我很困惑如何继续。

代码笔：https://codepen.io/ToxifiedM/pen/MWKeERr

原问题：How Can I Make SVG Text Animation Seamless And Accurate?

链接问题1：A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?

相关问题 2：To Control The Speed Of Multiple SVG Elements Using Jquery?

【问题讨论】：

【参考方案1】：

我只为世界组演示它，希望你能够为所有字母做它。

我会这样做：

我将所有形状放在一个组中，并使用 document.querySelector("#world").querySelectorAll("*"); 选择那些路径，其中 asterix * 选择组内的所有元素：线条、路径...

我没有在 css 中设置 stroke-dasharray 和 stroke-dashoffset，而是将它们设置为展示属性，因为我使用的是 javascript，所以我正在计算这些值并在 javascript 中设置这些属性：

let totalLength = s.getTotalLength(); 
s.setAttribute("stroke-dasharray",totalLength);
s.setAttribute("stroke-dashoffset",totalLength);

其中 s 是 svg 形状。

let world = document.querySelector("#world").querySelectorAll("*");
let speed = 1;//change this to change the speed of the animation
world.forEach((s,i)=> 
    let totalLength = s.getTotalLength(); 
    s.setAttribute("stroke-dasharray",totalLength);
    s.setAttribute("stroke-dashoffset",totalLength);
    s.setAttribute("style", `animation-delay:$i*speeds`)      
)

svg 
  width: 400px;
  left: 50%;
  transform: translate(50%);


#world *
  animation: letter-animation 1s linear forwards;



@keyframes letter-animation 
    100% 
        stroke-dashoffset: 0;

<svg id="WOYP" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 39.219 29.466">
  <defs>
    <clipPath id="clip-path-36">
      <path id="D2" d="M44.294,14.5v.076h0V14.6h0v.018h0v.018h0v.018h0v.019a3.616,3.616,0,0,1-.231,1.064,3.245,3.245,0,0,1-.731,1.139,3.8,3.8,0,0,1-1.277.836,4.856,4.856,0,0,1-1.876.327H39.061v-.59c.184.013.385.019.6.019h.558a3.588,3.588,0,0,0,1.455-.259,2.444,2.444,0,0,0,.927-.684,2.569,2.569,0,0,0,.487-.953,4.119,4.119,0,0,0,.139-.884v-.032h0v-.016h0v-.017h0V14.6h0v-.017h0v-.138a3.254,3.254,0,0,0-.148-.874,2.553,2.553,0,0,0-.487-.891,2.627,2.627,0,0,0-.886-.669,3.089,3.089,0,0,0-1.347-.264h-.707c-.123,0-.241,0-.35,0s-.19.008-.245.015v-.581h1.308a5.084,5.084,0,0,1,1.467.187,3.963,3.963,0,0,1,1.058.478,2.776,2.776,0,0,1,.71.66,3.453,3.453,0,0,1,.424.741,3.321,3.321,0,0,1,.21.7,3.623,3.623,0,0,1,.056.514h0v.006h0v.006h0v.006h0v.006h0V14.5Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-37" transform="translate(-5.561 -10.291)">
      <path id="D1" d="M39.157,18.037H37.938a.56.56,0,0,0,.191-.176.493.493,0,0,0,.071-.277V11.639a.464.464,0,0,0-.262-.453h1.219v6.851Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-38">
      <path id="L2" data-name="L2" d="M35.564,18.021H32.72v-.494c.11.014.262.031.455.051a4.959,4.959,0,0,0,.651.02q.465,0,.776-.015a2.383,2.383,0,0,0,.527-.076.907.907,0,0,0,.362-.186,1.374,1.374,0,0,0,.279-.358Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-39" transform="translate(-5.561 -10.291)">
      <path id="L1" data-name="L1" d="M32.8,17.527v.494H31.559a.6.6,0,0,0,.206-.176.463.463,0,0,0,.076-.277V11.623a.46.46,0,0,0-.282-.453H33.07a.506.506,0,0,0-.2.171.486.486,0,0,0-.076.282v5.9Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-40">
      <path id="R3" data-name="R3" d="M25.583,14.284a12.176,12.176,0,0,1,1.264.061c.174,0,.556.37.6.434a1.35,1.35,0,0,1,.181.215c.054.08.1.148.14.2l.591,1.012q.12.21.246.412c.083.136.165.266.245.392s.158.238.231.339.138.183.192.246a1.077,1.077,0,0,0,.192.174,1.933,1.933,0,0,0,.214.131,1.976,1.976,0,0,0,.244.118l-1.046.007a.772.772,0,0,1-.51-.162,1.449,1.449,0,0,1-.322-.336c-.254-.4-.476-.757-.67-1.08s-.376-.631-.549-.923c-.067-.1-.132-.209-.2-.314a1.767,1.767,0,0,0-.2-.276.941.941,0,0,0-.259-.2.712.712,0,0,0-.34-.083l-.366,0h-.245v-.366Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-41">
      <path id="R2" data-name="R2" d="M26.822,14.608a11.217,11.217,0,0,1-1.588.027h-.016V14.2c.067,0,.138,0,.211.009s.149.013.241.016.195.005.311.005a1.457,1.457,0,0,0,.673-.138,1.226,1.226,0,0,0,.419-.341,1.263,1.263,0,0,0,.213-.434,1.607,1.607,0,0,0,.061-.395v0a1.656,1.656,0,0,0-.061-.395,1.258,1.258,0,0,0-.213-.433,1.215,1.215,0,0,0-.419-.341,1.457,1.457,0,0,0-.673-.138c-.116,0-.22,0-.311,0s-.172.009-.241.015-.144.011-.211.011v-.46h.619c.485,0,.93.04.985.046h0a1.961,1.961,0,0,1,.457.126,1.838,1.838,0,0,1,.528.327,1.789,1.789,0,0,1,.41.525,1.487,1.487,0,0,1,.159.588v.025h0c0,.029,0,.057,0,.085v.03c0,.028,0,.056,0,.085h0v.024h0a1.487,1.487,0,0,1-.159.589,1.785,1.785,0,0,1-.41.524,1.838,1.838,0,0,1-.528.327,1.907,1.907,0,0,1-.457.125Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-42" transform="translate(-5.561 -10.291)">
      <path id="R1" data-name="R1" d="M25.314,18.03H24.085a.746.746,0,0,0,.191-.177.441.441,0,0,0,.081-.266V11.621a.463.463,0,0,0-.081-.271.6.6,0,0,0-.191-.172h1.229v6.429a.422.422,0,0,0,.08.246.73.73,0,0,0,.191.177Z" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <clipPath id="clip-path-43">
      <path id="O1" 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" style="fill: none;clip-rule: evenodd" />
    </clipPath>
    <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" style="fill: none;clip-rule: evenodd" />
    </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" style="fill: none;clip-rule: evenodd" />
    </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" style="fill: none;clip-rule: evenodd" />
    </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" style="fill: none;clip-rule: evenodd" />
    </clipPath>
  </defs>

  <g id="world" stroke="#003668" stroke- fill="none">
    <!--W-->
    <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)" />
    <!--O-->
    <path 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)" />
    <!--R-->
    <line x1="19.374" y1="0.482" x2="19.374" y2="7.937" clip-path="url(#clip-path-42)" />
    <path d="M25.261,11.426h1.112a1.419,1.419,0,0,1,1.57,1.5,1.466,1.466,0,0,1-1.57,1.5H25.261" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-41)" />
    <path d="M25.065,14.435H26.5c.654,0,1.7,2.42,2.224,3.074l.261.261c.262.131,1.112.458,1.112.458" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-40)" />
    <!--L-->
    <line x1="26.754" y1="0.482" x2="26.754" y2="7.937" clip-path="url(#clip-path-39)" />
    <path d="M32.707,17.77h2.551a.5.5,0,0,0,.327-.13,1.886,1.886,0,0,0,.261-.72" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-38)" />
    <!--D-->
    <line x1="33.118" y1="0.482" x2="33.118" y2="7.937" clip-path="url(#clip-path-37)" />
    <path d="M38.94,11.492h1.766a3.118,3.118,0,0,1,2.224.915,3,3,0,0,1,.85,2.159,3.079,3.079,0,0,1-1.047,2.354,3.314,3.314,0,0,1-2.158.85H38.94" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-36)" />

  </g>
</svg>

更改 JavaScript 中的 speed 变量以使其更快或更慢

【讨论】：

你的代码很完美，我正在尝试在变量world下初始化多个id，但只有世界正在获取动画。请看一看。

let world = document.querySelector("#World, #On-Your").querySelectorAll("*"); let speed = .7;//change this to change the speed of the animation world.forEach((s,i)=&gt;      let totalLength = s.getTotalLength();      s.setAttribute("stroke-dasharray",totalLength);     s.setAttribute("stroke-dashoffset",totalLength);     s.setAttribute("style", 'animation-delay:$i*speeds')       )

请看一下这支笔：codepen.io/enxaneta/pen/9240c310c2faff2d2bab0310c2a48bef 如何为动画设置多个速度，根据您的代码，它为<g id="all"> 下的所有路径和行应用“.7”，而不是我使用<g id="World-On-Your-Plate">及其子<g id="World">，<g id="On-Your">，后跟<g id="Plate">，在这里我想为<g id="On-Your">设置速度“.4”，同时保持速度“.7”，因为它是“#World”和“#板”分别。只需检查一次代码笔，因为在这里听起来可能有点复杂。 codepen.io/ToxifiedM/pen/MWKeERr @YuvrajSingh：我不知道您的 cmets 是否属于同一个问题，或者最好作为一个单独的问题。您已经将此答案标记为正确，所以不知道是不是后者。 @halfer：同样的问题，但只是一个查询，主要问题已由 enxaneta 回答，我正在发布一个相同的问题。

以上是关于如何使用 JQuery 控制基于 CSS 的 SVG 动画？的主要内容，如果未能解决你的问题，请参考以下文章

第二十五篇 jQuery 学习7 获取并设置 CSS 类

Jquery如何获取浏览器窗口宽度？

如何根据值将 css 类添加到选择列表选项中 - 使用 jQuery

如何使用 jQuery 同步 CSS3 动画事件和事件监听器

jquery动画控制非css属性

使用 Jquery/CSS 进行跨域 iframe 控制/加载