主页 / 问题 / 1317990
Accepted
Majestio
Asked:2022-08-16 13:16:27 +0000 UTC2022-08-16 13:16:27 +0000 UTC

可重复的 SVG 动画，在重复之间有停顿

  • 772

我正在尝试想出一种方法来暂停重复动画。但至今陷入了死胡同。

编辑

在此处输入图像描述

需要下一个效果

字母“SVG”应该每 10 秒运行一次明亮的蓝线（您可以有两条不同的线，如图所示），斜率为 125⁰ - 在图中，黑线表示近似角度。红色箭头 - 表示滑动线的方向。线条应该快速“运行”，即使在 1 秒内。

我相信它可以以某种方式完成。但到目前为止，想象力还不够。也许您可以以某种方式使用蒙版形式的图层叠加并使用z-index？我寻求帮助，我寻求想法。

svg

3 个回答

  1. 对于动画，您需要将光栅图像转换为矢量。
    矢量形式的 SVG 标志很容易在搜索引擎中找到。

    矢量编辑器中输入的SVG字母：F8
    选择菜单项后获得的每个字母的路径：轮廓/轮廓对象 Shift+Ctrl+C

    总结果

    <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 768 256" >
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
</g>  
           <!-- Буквы S V G -->
<g aria-label="SVG" >
<path d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>
</svg>

    跑道

    一个 SVG 渐变动画用于实现它：

      <!-- анимация бегущей полосы      -->
     <animateTransform id="anT" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s;anT.end+2s"
        dur="5s"
         fill="freeze"
         repeatCount="1"        
        />

    我使循环之间的渐变动画暂停等于2s，如果您需要暂停10s，只需将其更改为10s 

    <svg xmlns="http://www.w3.org/2000/svg" width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
    <linearGradient id="Lg" x2="1" y2="1" >
      <stop offset="0%" stop-color="black" />
      <stop offset="33%" stop-color="black" />
      <stop offset="50%" stop-color="blue" />
      <stop offset="56%" stop-color="black" />
      <stop offset="100%" stop-color="black" />
        <!-- анимация бегущей полосы      -->
     <animateTransform id="anT" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s"
        dur="5s"
         fill="freeze"
         repeatCount="indefinite"       
        />
    </linearGradient>
  </defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>

</g>  
           <!-- Буквы S V G -->
<g aria-label="SVG" fill="url(#Lg)">
<path d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>
</svg>

    跑步带+标志旋转

    如果您愿意，可以通过添加徽标旋转动画使动画更复杂一些：

    <animateTransform id="anR"
   attributeName="transform"
   type="rotate"
   begin="anT.end+1s"
   dur="2s"
   values="0 128 127.4;360 128 127.4"  />

    使用该方法获得旋转中心的坐标getBBox()

    开始动画的顺序提供了条件：begin="anT.end+1s"从字面上看，可以这样解读——渐变id="anT"动画结束后，标志旋转动画在一秒钟内开始。

    <svg xmlns="http://www.w3.org/2000/svg"width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
    <linearGradient id="Lg" x2="1" y2="1" >
      <stop offset="0%" stop-color="black" />
      <stop offset="33%" stop-color="black" />
      <stop offset="50%" stop-color="blue" />
      <stop offset="56%" stop-color="black" />
      <stop offset="100%" stop-color="black" />
        <!-- анимация бегущей полосы      -->
     <animateTransform id="anT" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="0s;anR.end"
        dur="3s"
         fill="freeze"      
        />
    </linearGradient>
  </defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
             <!-- Анимация вращения логотипа -->
 <animateTransform id="anR"
   attributeName="transform"
   type="rotate"
   begin="anT.end+1s"
   dur="2s"
   values="0 128 127.4;360 128 127.4"  />
</g>  
           <!-- Буквы S V G -->
<g aria-label="SVG" fill="url(#Lg)">
<path d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>
</svg>

<script>
let  bb = logo.getBBox();
console.log(bb.x + bb.width /2);
console.log(bb.y + bb.height /2);
</script>

    • 4

  2. 在此处输入图像描述

    解决方案

    这条线穿过 SVG 字母1s。pause - 10s，然后循环重复

    begin="svg1.click;anT.end+10s"

    对于解决方案，使用了两个向量层的字母和一个蒙版

    • 顶层深蓝色
    • 底层是亮蓝色
    • 面具有明亮的条纹形状，如上图所示。
    • 为蒙版移动设置动画时，顶部的深色图层切入底部的亮蓝色图层

    下面是完整代码，点击后动画开始

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
  <mask id="mask" > 
    <rect width="100%" height="100%" fill="white" />
   <g fill="black" transform="translate(-120,0)" >
        <path d="m 306.02887,0.3267 15.42095,0 93.19595,256.05376 -15.2786,0.39113 z"/> 
              <path d="m 326.91668,0.3267 5.69646,0 93.18401,256.02097 -5.52528,0.47033 z"/> 
             <!-- Анимация движения маски    -->
    <animateTransform id="anT"
        attributeName="transform"
        type="translate"
        begin="svg1.click;anT.end+10s"
        dur="1s"
        values="-95,0;400,0"
        restart="whenNotActive"/>
      
    </g> 
  </mask>  
</defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
      
</g>  
           <!-- Буквы S V G  нижний слой--> 
<g>
<path fill=" #7edcff" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>           
         <!-- Буквы S V G  верхнй слой--> 
    <g mask="url(#mask)" >
    <path fill="#005aa0" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
    </g>
</svg>

    我更喜欢车道跑得慢一点的选项——2s重复之间的停顿是相等的——begin="svg1.click;anT.end+3s"

    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="75%" height="75%" viewBox="0 0 768 256" >
<defs>
  <mask id="mask" > 
    <rect width="100%" height="100%" fill="white" />
   <g fill="black" transform="translate(-120,0)" >
        <path d="m 306.02887,0.3267 15.42095,0 93.19595,256.05376 -15.2786,0.39113 z"/> 
              <path d="m 326.91668,0.3267 5.69646,0 93.18401,256.02097 -5.52528,0.47033 z"/> 
             <!-- Анимация движения маски    -->
    <animateTransform id="anT"
        attributeName="transform"
        type="translate"
        begin="svg1.click;anT.end+3s"
        dur="2s"
        values="-95,0;400,0"
        restart="whenNotActive"/>
      
    </g> 
  </mask>  
</defs> 
                 <!-- Логотип SVG -->
<g id="logo">
<path d="M245 154a36 36 0 00-32-61 36 36 0 00-20-66c-12 0-23 6-30 16a36 36 0 00-61-32c-8 8-12 21-9 32a36 36 0 00-66 20c0 12 6 23 16 30a36 36 0 00-32 10 36 36 0 000 51 36 36 0 0032 9 36 36 0 0020 66c12 0 23-6 30-16a36 36 0 0060 32c9-8 12-20 10-32a36 36 0 0066-20c0-12-6-23-16-30a36 36 0 0032-9"/>
<path d="M234 114c-8-9-21-9-29 0h-42l30-30a21 21 0 10-21-21l-30 30V51a21 21 0 10-29 0v42L83 63a21 21 0 10-20 21l30 30H51a21 21 0 100 29h42l-30 30a21 21 0 1020 20l30-30v42a21 21 0 1029 0v-42l30 30a21 21 0 1021-20l-30-30h42a21 21 0 1029-29" fill="#FFB13B"/>
      
</g>  
           <!-- Буквы S V G  нижний слой--> 
<g>
<path fill=" #7edcff" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
</g>           
         <!-- Буквы S V G  верхнй слой--> 
    <g mask="url(#mask)" >
    <path fill="#005aa0" d="M285 164h49v19.4q0 12.1 3.8 18 4 5.9 12.2 5.9 7.5 0 11.9-5.4 4.5-5.4 4.5-14 0-7.5-4.3-15-4.1-7.4-12.7-14.8l-11.2-9.6q-24-20.2-33.2-30.7-8.5-9.4-13-22.1-4.2-12.7-4.2-27.6 0-30 16.8-46.7 17-16.8 47.4-16.8 30.3 0 45.6 15.3Q413 35 413 65.4v19.7H366V68.6q0-11.5-3.7-16.8-3.7-5.4-11.7-5.4-6.6 0-10.6 4.8t-4 12.8q0 13.4 32.6 42.5l1.3 1.3 3.7 3.3q28.7 26 34.3 37.4 3.8 7.6 5.6 16.7 2 9 2 19.4 0 30.8-17.6 48.2-17.5 17.1-49 17.1-31.4 0-47.7-17.3Q285 215.1 285 182zM454.3 246.6L419.6 8h52.2l8.4 97.9q.6 7.3 1.9 29.5l2.8 51.2q2.3-30 6.1-70.8l1-10.2L501.3 8h51.1L517 246.6zM645.8 246.6l-.2-18.5q-7.4 10.8-17.5 16.4-10.2 5.7-22.4 5.7-22 0-33.4-18.6-11.2-18.8-11.2-55.3v-98q0-36.7 16.4-55.2t48.8-18.5q32.7 0 48.9 18.4 16.3 18.3 16.3 55.2v11.4h-50v-20q0-11.7-3.8-17-3.6-5.4-11.6-5.4-7.8 0-11.4 5.4-3.6 5.3-3.6 17v115.6q0 11.6 3.6 16.9 3.6 5.2 11.6 5.2t11.5-5.2q3.6-5.3 3.6-17v-26.7h-17v-43.8h67v132z" />
    </g>
</svg>

    • 4
  3. Best Answer

    据我了解，您的主要问题是渐变本身。更准确地说，是它的过渡、方向和动画。

    使用线性 SVG 渐变与 CSS 中的类似渐变类似，只是在 CSS 中枚举由逗号分隔，而在 SVG 中 - 在特殊的嵌套标签中。

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-8 0 195 82">
  <defs>
    <!-- Градиент. Угол можно менять через "x" и "y" -->
    <linearGradient id="beam" x1="0" y1=".1" x2="1" y2="0">
      <stop offset="0%" stop-color="#005A9C" />
      <stop offset="41%" stop-color="#005A9C" />
      <!-- Широкая полоса -->
      <stop offset="42%" stop-color="#7edcff" />
      <stop offset="50%" stop-color="#7edcff" />
      <!-- Промежуток между полосами -->
      <stop offset="51%" stop-color="#005A9C" />
      <stop offset="54%" stop-color="#005A9C" />
      <!-- Узкая полоса -->
      <stop offset="55%" stop-color="#7edcff" />
      <stop offset="58%" stop-color="#7edcff" />

      <stop offset="59%" stop-color="#005A9C" />
      <stop offset="100%" stop-color="#005A9C" />
      <!-- Анимация градиента -->
      <animateTransform id="blink" attributeName="gradientTransform" type="translate" from="-1 0" to="1 0" begin="0s;blink.end+5s" dur="1s" fill="freeze" />
    </linearGradient>
    <!-- Контур для букв -->
    <path id="SVG" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z" />
    <!-- Маска для букв. Если анимируется обводка, то обрезает внешнюю часть обводки. Иначе, можно удалить. -->
    <clipPath id="clip">
      <use xlink:href="#SVG" />
    </clipPath>
  </defs>
  <!-- SVG-звезда -->
  <g id="logo" transform="translate(-2, -4)">
    <path d="m 32.195312,16.595703 a 5.380104,5.380104 0 0 0 0,7.609375 v 11.009766 l -7.785156,-7.785156 a 5.380104,5.380104 0 1 0 -5.380859,5.378906 l 7.785156,7.787109 H 15.804688 a 5.380104,5.380104 0 1 0 0,7.609375 h 11.009765 l -7.785156,7.785156 a 5.380104,5.380104 0 1 0 5.380859,5.38086 l 7.785156,-7.785156 v 11.009765 a 5.380104,5.380104 0 1 0 7.609376,0 V 53.585938 l 7.785156,7.785156 a 5.380104,5.380104 0 1 0 5.380859,-5.38086 l -7.785156,-7.785156 h 11.009765 a 5.380104,5.380104 0 1 0 0,-7.609375 H 45.181641 l 7.789062,-7.787109 a 5.380104,5.380104 0 1 0 -5.380859,-5.378906 l -7.785156,7.785156 V 24.205078 a 5.380641,5.380641 0 0 0 -7.609376,-7.609375 z" stroke-width="8" stroke="#000" />
    <path d="m 32.194937,16.594937 a 5.380104,5.380104 0 0 0 0,7.609375 v 11.009765 l -7.785156,-7.785155 a 5.380104,5.380104 0 1 0 -5.380859,5.378905 l 7.785155,7.787112 H 15.804313 a 5.380104,5.380104 0 1 0 0,7.609373 h 11.009764 l -7.785155,7.785158 a 5.380104,5.380104 0 1 0 5.380859,5.38086 l 7.785156,-7.785156 v 11.00976 a 5.380104,5.380104 0 1 0 7.609375,0 v -11.00976 l 7.785156,7.785156 a 5.380104,5.380104 0 1 0 5.38086,-5.38086 l -7.785156,-7.785158 h 11.009765 a 5.380104,5.380104 0 1 0 0,-7.609375 h -11.01367 l 7.789061,-7.78711 a 5.380104,5.380104 0 1 0 -5.38086,-5.378905 l -7.785156,7.785155 V 24.204312 a 5.3806411,5.3806411 0 0 0 -7.609375,-7.609375 z" fill="#FFB13B" />
  </g>
  <!-- Буквы с пробегающими бликами... -->
  <g transform="translate(68,9)">
    <!-- ... по заливке -->
    <use xlink:href="#SVG" fill="url(#beam)" />
    <!-- ... по обводке (раскомментируйте следующую строку и, наоборот, закомментируйте предыдущую)
    <use xlink:href="#SVG" fill="#005A9C" stroke-width="4" stroke="url(#beam)" clip-path="url(#clip)" /> -->
  </g>
</svg>

    • 4

相关问题