主页 / 问题 / 1605775
Accepted
Alexandr_TT
Asked:2025-01-28 22:41:54 +0000 UTC2025-01-28 22:41:54 +0000 UTC

如何使 SVG 和 CSS 动画正确协同工作？

  • 772

尝试弄清楚 CSS 和 SVG 动画如何交互。为此，我采用了最简单的场景：

  1. 角色从右向左移动，同时上下移动（svg）
  2. 旋转 180 度 (css) 并
  3. 向后移动至左右 (css)

以下是代码：

body { perspective: 1000px;}

  .container{
  width:80vw;
  height:80vh;
}  
#SnowMaiden {
transform-box:fill-box;
transform-origin: center center;
animation: Maiden_rotate 2s linear 8s  forwards, Maiden_translate 14s linear 16s forwards;
}
@keyframes Maiden_rotate {
0%{ transform:  rotate3d(0,1,0,20deg);}
50%{ transform:  rotate3d(0,1,0,80deg);}
100%{ transform:  rotate3d(0,1,0,180deg);}
}
@keyframes Maiden_translate {
0%{ transform:  translate3d(300px,10px,10px);}
50%{ transform:  translate3d(800px,10px,10px);}
100%{ transform:  translate3d(1400px,10px,10px);}
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" > 

       <!-- Фон с ёлочкой -->
    <image id="img1" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="100%" height="100%" opacity="1"   />  
    
    <image  id="SnowMaiden" x="1400" y="650"  xlink:href="https://isstatic.askoverflow.dev/LU3Bvfdr.png" opacity="0">
                  <!-- Анимация появления девочки с корзинкой -->
   <animate id="op1_Maidan" attributeName="opacity"   values="0; 1" dur="2s" begin="svg1.click"  repeatCount="1" fill="freeze" restart="whenNotActive" />   
                            <!-- Перемещение  по горизонтали -->
  <animate id="Go_Maidan" attributeName="x"   values="1400;1300;1200;1100;1000;900;800;700;600;500;400;300" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"  restart="whenNotActive"  />   
                         <!-- Перемещение по вертикали -->    
   <animate id="Go_Maidan_y" attributeName="y"   values="650;670;650;630;650;670;650;630;650;670;650;630" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"   restart="whenNotActive"  />  
</image>  
</svg>

从代码片段的结果可以看出：
180 度旋转之前的 SVG 动画阶段一切正常。故障在转弯后开始。看起来 CSS 动画与之前的 SVG 动画冲突，这就是 CSS 运动结果不可见的原因。
当然，您可以纯粹用 SVG 或仅使用 CSS 来实现动画。
我有一个问题，如何让 SVG 和 CSS 动画正确协同工作？

html

2 个回答

  1. Best Answer

    这与SMILvs无关。CSS只是所选的属性没有完全满足要求。

    body {perspective: 1000px}

#girl {
  transform-box:fill-box;
  transform-origin: center center;
  animation: 
    mR 2s linear 9.5s forwards,
    mT 5s linear 12s forwards,
    mR 2s linear 17s reverse forwards;
}
@keyframes mR {
  0%    {transform: rotate3d(0,1,0,20deg)}
  50%   {transform: rotate3d(0,1,0,80deg)}
  100%  {transform: rotate3d(0,1,0,180deg)}
}
@keyframes mT {
/* transform: translate не меняет исходные координаты,
а смещает от них(300px+300px = 600px) */
  0%  {x: 300px;  y: 630px}
  10% {x: 410px;  y: 650px}
  20% {x: 520px;  y: 670px}
  30% {x: 630px;  y: 650px}
  40% {x: 740px;  y: 630px}
  50% {x: 850px;  y: 650px}
  60% {x: 960px;  y: 670px}
  70% {x: 1070px; y: 650px}
  80% {x: 1180px; y: 630px}
  90% {x: 1290px; y: 650px}
  100%{x: 1400px; y: 670px}
}
    <svg id="xyz" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1680 1050"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" > 
  <image width="100%" height="100%" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg"/>
  <image id="girl" x="1400" y="650" opacity="0"
    xlink:href="https://isstatic.askoverflow.dev/LU3Bvfdr.png">

    <animate id="spawn"
      attributeName="opacity"
      begin="xyz.click" values="0; 1"
      dur="2s" repeatCount="1" fill="freeze" restart="whenNotActive" />

    <animate
      attributeName="x"
      begin="spawn.end"
      values="1400;1300;1200;1100;1000;900;800;700;600;500;400;300"
      dur="5s" repeatCount="indefinity" fill="freeze" restart="whenNotActive"/>

    <animate
      attributeName="y"
      begin="spawn.end"
      values="650;670;650;630;650;670;650;630;650;670;650;630"
      dur="5s" repeatCount="indefinity" fill="freeze" restart="whenNotActive"/>
  </image>  
</svg>

    • 3

  2. SVG解决方案

    增加动画包的循环：运动+旋转。
    循环是通过以下条件实现的：
    begin="op1_Maidan.end;scale_M2.end"，其中
    scale_M2.end"是第一次循环后角色在起点处转动的动画的结束位置。

    .container{
  width:80vw;
  height:80vh;
}  
#SnowMaiden {
transform-box:fill-box;
transform-origin: center center;
}
    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" > 

       <!-- Фон с ёлочкой -->
    <image id="img1" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="100%" height="100%" opacity="1"   />  
    
    <image  id="SnowMaiden" x="1400" y="650"  xlink:href="https://isstatic.askoverflow.dev/LU3Bvfdr.png" opacity="0">
                  <!-- Анимация появления девочки с корзинкой -->
   <animate id="op1_Maidan" attributeName="opacity"   values="0; 1" dur="2s" begin="svg1.click"  repeatCount="1" fill="freeze" restart="whenNotActive" />   
                            <!-- Перемещение  по горизонтали -->
   <animate id="Go_Maidan" attributeName="x"   values="1400;1300;1200;1100;1000;900;800;700;600;500;400;300" dur="5s" begin="op1_Maidan.end;scale_M2.end"  repeatCount="1" fill="freeze"  restart="whenNotActive"  />   
                         <!-- Перемещение по вертикали -->    
    <animate id="Go_Maidan_y" attributeName="y"   values="650;670;650;630;650;670;650;630;650;670;650;630" dur="5s" begin="Go_Maidan.begin"  repeatCount="1" fill="freeze"   restart="whenNotActive"  />  
                              <!-- Поворот -->
      <animateTransform id="scale_M" attributeName="transform" type="scale" values="-1 1" begin="Go_Maidan_y.end" dur="0.1s" fill="freeze" />  
                               <!-- Назад по Х     -->
    <animate id="Go_back_x" attributeName="x"   values="300;400;500;600;700;800;900;1000;1100;1200;1300;1400" dur="5s" begin="scale_M.end"  repeatCount="1" fill="freeze"  restart="whenNotActive"  />    
                                    <!-- Назад по Y -->
     <animate id="Go_back_y" attributeName="y"   values="650;670;650;630;650;670;650;630;650;670;650;630" dur="5s" begin="scale_M.end"  repeatCount="1" fill="freeze"   restart="whenNotActive"  />
     
                             <!-- Поворот -->
      <animateTransform id="scale_M2" attributeName="transform" type="scale" values="1 1" begin="Go_back_y.end" dur="0.1s" fill="freeze" />  
    
</image>  
</svg>

    • 0

相关问题