SVG Animation Viewer - Fixed Namespace

🎬 Animation Display

Loading animation...

Ready - Animations will play automatically

00.0s

Animations: 0 Cycle: 1 Speed: 1.0x

🎮 Controls

Playback

Speed Control

Click "Update Display" after speed change

Tools

📝 SVG Code Editor

SVG Code Editor Chars: 0

<svg width="1000" height="700" viewBox="0 0 1000 700" xmlns="http://www.w3.org/2000/svg" style="background: #0a0a12;">
    <defs>
        <linearGradient id="blueWhite" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#00aaff"/>
            <stop offset="100%" stop-color="#ffffff"/>
        </linearGradient>
        <linearGradient id="blueArmor" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#0066cc"/>
            <stop offset="100%" stop-color="#003366"/>
        </linearGradient>
        <linearGradient id="redBlack" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#ff3333"/>
            <stop offset="100%" stop-color="#000000"/>
        </linearGradient>
        <radialGradient id="jointMetal" cx="40%" cy="40%" r="60%">
            <stop offset="0%" stop-color="#cccccc"/>
            <stop offset="100%" stop-color="#666666"/>
        </radialGradient>
        
        <filter id="glow">
            <feGaussianBlur stdDeviation="2" result="blur"/>
            <feMerge>
                <feMergeNode in="blur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    
    
    <text x="500" y="50" text-anchor="middle" fill="#00f3ff" font-family="monospace" font-size="28" font-weight="bold">
        TRANSFORMERS SHOWCASE
    </text>
    
    
    <line x1="0" y1="550" x2="1000" y2="550" stroke="#444466" stroke-width="3"/>
    
    
    <g id="robot1" transform="translate(300,350)">
        
        <circle cx="0" cy="-80" r="25" fill="#00aaff"/>
        
        
        <rect x="-40" y="-60" width="80" height="120" rx="5" fill="url(#blueArmor)" stroke="#0066cc" stroke-width="3"/>
        
        
        <rect x="-50" y="-30" width="15" height="60" fill="#00aaff" id="r1LeftArm">
            <animateTransform attributeName="transform" type="rotate" values="0;30;0;-20;0" dur="2s" begin="0s" repeatCount="indefinite"/>
        </rect>
        
        
        <rect x="35" y="-30" width="15" height="60" fill="#00aaff" id="r1RightArm">
            <animateTransform attributeName="transform" type="rotate" values="0;-30;0;20;0" dur="2s" begin="0.5s" repeatCount="indefinite"/>
        </rect>
        
        
        <rect x="-30" y="60" width="20" height="80" fill="#0066cc" id="r1LeftLeg">
            <animateTransform attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="1s" begin="0s" repeatCount="indefinite"/>
        </rect>
        <rect x="10" y="60" width="20" height="80" fill="#0066cc" id="r1RightLeg">
            <animateTransform attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="1s" begin="0.5s" repeatCount="indefinite"/>
        </rect>
        
        
        <circle cx="0" cy="-80" r="8" fill="#00f3ff" filter="url(#glow)">
            <animate attributeName="r" values="8;10;8" dur="1s" repeatCount="indefinite"/>
        </circle>
    </g>
    
    
    <g id="robot2" transform="translate(700,350)">
        
        <circle cx="0" cy="-80" r="25" fill="#ff3333"/>
        
        
        <rect x="-40" y="-60" width="80" height="120" rx="5" fill="url(#redBlack)" stroke="#cc0000" stroke-width="3"/>
        
        
        <rect x="-50" y="-30" width="15" height="60" fill="#ff3333" id="r2LeftArm">
            <animateTransform attributeName="transform" type="rotate" values="0;-30;0;20;0" dur="2s" begin="0.2s" repeatCount="indefinite"/>
        </rect>
        
        
        <rect x="35" y="-30" width="15" height="60" fill="#ff3333" id="r2RightArm">
            <animateTransform attributeName="transform" type="rotate" values="0;30;0;-20;0" dur="2s" begin="0.7s" repeatCount="indefinite"/>
        </rect>
        
        
        <rect x="-30" y="60" width="20" height="80" fill="#990000" id="r2LeftLeg">
            <animateTransform attributeName="transform" type="translate" values="0,0; 0,-15; 0,0" dur="0.8s" begin="0.3s" repeatCount="indefinite"/>
        </rect>
        <rect x="10" y="60" width="20" height="80" fill="#990000" id="r2RightLeg">
            <animateTransform attributeName="transform" type="translate" values="0,0; 0,-15; 0,0" dur="0.8s" begin="0.8s" repeatCount="indefinite"/>
        </rect>
        
        
        <circle cx="0" cy="-80" r="8" fill="#ff6666" filter="url(#glow)">
            <animate attributeName="r" values="8;12;8" dur="0.8s" repeatCount="indefinite"/>
        </circle>
    </g>
    
    
    <text x="300" y="250" text-anchor="middle" fill="#00f3ff" font-family="monospace" font-size="24" font-weight="bold" opacity="0" id="yay1">
        <animate attributeName="opacity" values="0;1;0" dur="3s" begin="2s" repeatCount="indefinite"/>
        YAY!
    </text>
    
    <text x="700" y="250" text-anchor="middle" fill="#ff3333" font-family="monospace" font-size="24" font-weight="bold" opacity="0" id="yay2">
        <animate attributeName="opacity" values="0;1;0" dur="3s" begin="3s" repeatCount="indefinite"/>
        YAY!
    </text>
    
    
    <g id="timeline" transform="translate(100,620)" opacity="0.7">
        <line x1="0" y1="0" x2="800" y2="0" stroke="#666" stroke-width="3"/>
        <circle cx="0" cy="0" r="8" fill="#00f3ff" opacity="0.8" id="playhead">
            <animate attributeName="cx" values="0;800;0" dur="10s" begin="0s" repeatCount="indefinite"/>
        </circle>
    </g>
    
    
    <text x="500" y="670" text-anchor="middle" fill="#00f3ff" font-family="monospace" font-size="16">
        WORKING ANIMATIONS - ALL ROBOTS DANCING
    </text>
</svg>

💡 IMPORTANT FIXES:

Added xmlns="http://www.w3.org/2000/svg" namespace
Removed xlink:href - using direct element IDs
All animations have begin="0s" for automatic start
Use "Auto-Fix" button to fix namespace issues

⚡ SVG ANIMATION VIEWER - WORKING

🎬 Animation Display

🎮 Controls

Playback

Speed Control

Tools

📝 SVG Code Editor

🎯 COMMON SVG ISSUES & FIXES:

🚨 Problems:

✅ Solutions: