微件:Svg文字描边

   <style>
       .animated-text path {
           fill: transparent;
           stroke: currentColor;
           stroke-width: 2;
           stroke-dasharray: var(--path-length);
           stroke-dashoffset: var(--path-length);
           animation: logo-anim 20s ease-in-out infinite;
       }

       @keyframes logo-anim {
           0% {
               stroke-dashoffset: var(--path-length);
               fill: transparent;
               opacity: 0;
           }
           10% {
               opacity: 1;
               stroke-dashoffset: var(--path-length);
           }
           40% {
               stroke-dashoffset: 0;
               fill: transparent;
           }
           48% {
               stroke-dashoffset: 0;
               fill: currentColor;
           }
           95% {
               stroke-dashoffset: 0;
               fill: currentColor;
               opacity: 1;
           }
           96% {
               stroke-dashoffset: var(--path-length);
               fill: currentColor;
               opacity: 0.5;
           }
           100% {
               stroke-dashoffset: var(--path-length);
               fill: transparent;
               opacity: 0;
           }
       }

       @media (prefers-color-scheme: dark) {
           .animated-text path {
               stroke: currentColor;
           }
       }

       #svg-container {
           text-align: center;
       }

       .animated-text {
           max-width: 100%;
           height: auto;
       }
   </style>

   <script>
       // 加载SVG文件并添加动画效果
       document.addEventListener('DOMContentLoaded', function() {
           const svgContainer = document.getElementById('svg-container');
           
           // 创建XMLHttpRequest对象
           const xhr = new XMLHttpRequest();
           xhr.open('GET', 'https://www.araceae.cn/sucai/tnxkbk.svg', true);
           
           xhr.onload = function() {
               if (xhr.status === 200) {
                   // 将SVG内容添加到容器中
                   svgContainer.innerHTML = xhr.responseText;
                   
                   // 计算所有path元素的长度并设置--path-length变量
                   const paths = document.querySelectorAll('.animated-text path');
                   paths.forEach(path => {
                       const length = path.getTotalLength();
                       path.style.setProperty('--path-length', length);
                       console.log('Path length:', length);
                   });
               }
           };
           
           xhr.send();
       });
   </script>