js实现本地svg文件变成svg动画代码-html代码-BFW代码库

js实现本地svg文件变成svg动画代码

代码语言：html

所属分类：动画

代码描述：js实现本地svg文件变成svg动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 描边动画生成器</title>
    <!-- 引入 Tailwind CSS 用于界面美化 -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col">

    <!-- 头部 -->
    <header class="bg-white border-b border-slate-200 py-4 px-6 shadow-sm">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <h1 class="text-xl font-bold text-slate-900 flex items-center gap-2">
                <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                SVG 描边动画生成器
            </h1>
            <p class="text-sm text-slate-500">上传静态 SVG 并转换为 CSS 路径绘制动画</p>
        </div>
    </header>

    <!-- 主体内容 -->
    <main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        <!-- 左侧输入与控制面板 -->
        <section class="lg:col-span-5 flex flex-col gap-6">
            <!-- SVG 上传与输入区 -->
            <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-4">
                <div class="flex justify-between items-center">
                    <label class="block text-sm font-semibold text-slate-700">1. 上传或输入静态 SVG</label>
                    <button id="btn-load-demo" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">加载演示示例</button>
                </div>
                
                <!-- 拖拽上传区域 -->
                <div id="drop-zone" class="border-2 border-dashed border-slate-300 hover:border-indigo-500 rounded-lg p-6 text-center cursor-pointer transition-colors bg-slate-50">
                    <input type="file" id="file-input" accept=".svg" class="hidden&qu.........完整代码请登录后点击上方下载按钮下载查看