时间戳

首页 > 解决方案 > 如何在 svg 元素上使用 css 动画和属性？

html - 如何在 svg 元素上使用 css 动画和属性？

问题描述

所以我有一个现有的代码，其中包含我想应用于我的 SVG 但在 div 元素上的效果。

我想在 SVG 元素上实现它。我已经开始了，你可以在这里看到

但问题是我在转换 CSS 属性时遇到问题，例如我的 svg 元素（线条、圆圈等）上的 box-shadow

此外，不知何故，我成功实现的动画在我的 SVG 的所有行上都有效，除了一个，我不明白为什么

以下是我想翻译成我的 SVG 和我的实际 SVG 的图片：

在此处输入图像描述

html,body{
  margin:0;
  padding:0;
}

  

  
.maincontainer{
  height:100vh;
  width:100%;
  background:#252525;
}

.center{
  
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  
}


/* Bouton Néon */

.aNeon{
  font-family:'Megrim';
  font-weight:bold;
  position:relative;
  display:inline-block;
  padding: 15px 30px;
  color:#c34aff;
  text-decoration:none;
  font-size:24px;
  overflow:hidden;
  transition:200ms;
  letter-spacing:4px;
  border: 1px solid;
  
}

.aNeon:hover{
  color:#c34aff;
  border:1px solid transparent;
  background:#c8c4c4;
  box-shadow:0 0 10px #c34aff, 0 0 40px #c34aff, 0 0 80px #c34aff;
}


/* Fin Bouton Néon */

/* Ring of Fire */

.ringOfFire{
  position:relative;
  height:600px;
  width:400px;
  filter:url('#wavy');
}

.ringOfFire:before{
  
  content:'';
  position:absolute;
  top:100px;
  left:100px;
  right:100px;
  bottom:100px;
  border:10px solid white;
  box-shadow: 0 0 50px black, inset 0 0 50px black;
  animation:woohoo 5s linear infinite;
}



.ringOfFire:after{
  box-shadow: 0 0 50px black, inset 0 0 50px black;
  
}
@keyframes woohoo{
  0%{
    box-shadow: 0 0 50px black, inset 0 0 50px black;
    filter: hue-rotate(0deg);
  }
  
  20%{
    box-shadow: 0 0 60px black, inset 0 0 60px black;
  }
  
  40%{
    box-shadow: 0 0 40px black, inset 0 0 40px black;
  }
  
  60%{
    box-shadow: 0 0 80px black, inset 0 0 80px black;
  }
  
  80%{
    box-shadow: 0 0 100px black, inset 0 0 100px black;
  }


100%{
    box-shadow: 0 0 50px black, inset 0 0 50px black;
    filter: hue-rotate(360deg);
  }
}

#hoodie{
  width:0;
  height:0;
}





/* Fin Ring of Fire */
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Quicksand:wght@300;400;500;600;700&family=Caveat+Brush&family=Caveat:wght@400;700&family=Poppins:ital,wght@1,300&family=Megrim&display=swap" rel="stylesheet">

<div class="maincontainer">
  <div class="center" style="background:white;">

    <!-- Ring of Fire -->
      
    <div class="ringOfFire">
    </div>
    <svg id="hoodie">
      <filter id="wavy">
        <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" seed="2">
          <animate attributeName="baseFrequency" dur="60s" values="0.02;0.005;0.02" repeat="indefinite">
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="30">
      </filter>
    </svg>
  </div>

  <!-- Fin Ring of Fire  -->

  <!-- Bouton Néon -->
  <div class="center" style="background:#252525;">

    <a class="aNeon" href="#">

      CONTACT

    </a>

    <!-- Fin Bouton Néon -->

  </div>
</div>

在此处输入图像描述

html,body{
  margin:0;
  padding:0;
}

.maincontainer{
  height:100vh;
  width:100%;
}


.center{
  
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  
}

#hoodie{
  width:0;
  height:0;
}
<html>
  <head>
    <meta charset="UTF-8">
   
  </head>
  <body>
    <div class="maincontainer">
    <div class="center">
      
      <!-- SVG TREE -->
    
    <svg height="250" width="250" filter="url(#wavy)"> 
      
    <line  x1=125 y1="0" x2="125" y2="250" stroke="black " stroke-width="6" /> 
      
      <circle   cx="204" cy="137"  r="25" stroke="black" stroke-width="6" fill="transparent"/>
      
      <line x1="125" y1="207" x2="187" y2="152" stroke="black" stroke-width="6"/>
      
      <circle cx="44" cy="42"  r="25" stroke="black" stroke-width="6" fill="transparent"/>
      
      
      <line x1="125" y1="112" x2="63" y2="57" stroke="black" stroke-width="6"/>
      
      
      
    </svg>
      
      <!-- FIN SVG TREE -->
      
      
      
      <!-- Special effects -->
      
      <svg id="hoodie">
      <filter id="wavy">
        <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" seed="2">
          <animate attributeName="baseFrequency" dur="60s" values="0.02;0.005;0.02" repeat="indefinite">
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="30">
      </filter>
    </svg>
        
        
        <!-- End Special effects -->
      
        
       
     
     </div>
     </div>
    
  
  </body>
</html>

非常感谢 ！

标签： htmlcssanimationsvg

解决方案

推荐阅读