AI-Generated SVG View Details - 生成一个图,代码如下 <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 渐变定义 --> <linearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" /> <stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:1" /> <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:1" /> </linearGradient> <linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#10B981;stop-opacity:1" /> <stop offset="100%" style="stop-color:#34D399;stop-opacity:1" /> </linearGradient> <linearGradient id="bookGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" /> <stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" /> </linearGradient> <linearGradient id="codeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#EF4444;stop-opacity:1" /> <stop offset="100%" style="stop-color:#F97316;stop-opacity:1" /> </linearGradient> <!-- 阴影滤镜 --> <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="8" dy="12" stdDeviation="12" flood-opacity="0.25"/> </filter> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur stdDeviation="4" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <!-- 背景圆圈 --> <circle cx="256" cy="256" r="240" fill="url(#primaryGradient)" filter="url(#shadow)" opacity="0.1"/> <circle cx="256" cy="256" r="220" fill="none" stroke="url(#primaryGradient)" stroke-width="2" opacity="0.2"/> <!-- 主要的书本图标 --> <g transform="translate(100, 120)"> <!-- 书本底部阴影 --> <path d="M40 280 L280 280 L280 320 L40 320 Z" fill="url(#primaryGradient)" opacity="0.3" rx="8"/> <!-- 书本主体 --> <path d="M20 80 L300 80 L300 300 L20 300 Z" fill="url(#bookGradient)" rx="12" filter="url(#shadow)"/> <!-- 书本内页 --> <rect x="30" y="90" width="260" height="200" fill="white" opacity="0.95" rx="8"/> <!-- 书页线条 --> <rect x="40" y="110" width="220" height="6" fill="url(#primaryGradient)" opacity="0.3" rx="3"/> <rect x="40" y="125" width="200" height="6" fill="url(#primaryGradient)" opacity="0.3" rx="3"/> <rect x="40" y="140" width="240" height="6" fill="url(#primaryGradient)" opacity="0.3" rx="3"/> <rect x="40" y="155" width="180" height="6" fill="url(#primaryGradient)" opacity="0.3" rx="3"/> <rect x="40" y="170" width="210" height="6" fill="url(#primaryGradient)" opacity="0.3" rx="3"/> <!-- 代码符号区域背景 --> <rect x="60" y="200" width="200" height="70" fill="url(#primaryGradient)" opacity="0.1" rx="8"/> <!-- 代码符号 </> --> <g transform="translate(100, 220)"> <!-- 左括号 < --> <path d="M20 5 L5 20 L20 35" stroke="url(#codeGradient)" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/> <!-- 右括号 > --> <path d="M100 5 L115 20 L100 35" stroke="url(#codeGradient)" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/> <!-- 斜杠 / --> <line x1="80" y1="5" x2="40" y2="35" stroke="url(#codeGradient)" stroke-width="8" stroke-linecap="round" filter="url(#glow)"/> </g> <!-- 书本装订线 --> <rect x="20" y="80" width="8" height="220" fill="url(#primaryGradient)" opacity="0.6" rx="4"/> <circle cx="24" cy="120" r="3" fill="white" opacity="0.8"/> <circle cx="24" cy="160" r="3" fill="white" opacity="0.8"/> <circle cx="24" cy="200" r="3" fill="white" opacity="0.8"/> <circle cx="24" cy="240" r="3" fill="white" opacity="0.8"/> <circle cx="24" cy="280" r="3" fill="white" opacity="0.8"/> </g> <!-- 装饰性元素 - 齿轮 --> <g transform="translate(380, 100)"> <circle cx="40" cy="40" r="32" fill="url(#accentGradient)" opacity="0.8" filter="url(#shadow)"/> <circle cx="40" cy="40" r="20" fill="white" opacity="0.9"/> <circle cx="40" cy="40" r="12" fill="url(#accentGradient)"/> <!-- 齿轮齿 --> <rect x="36" y="5" width="8" height="12" fill="url(#accentGradient)" opacity="0.8"/> <rect x="36" y="63" width="8" height="12" fill="url(#accentGradient)" opacity="0.8"/> <rect x="5" y="36" width="12" height="8" fill="url(#accentGradient)" opacity="0.8"/> <rect x="63" y="36" width="12" height="8" fill="url(#accentGradient)" opacity="0.8"/> </g> <!-- 装饰性元素 - 连接节点和网络 --> <g opacity="0.6"> <circle cx="80" cy="400" r="12" fill="url(#accentGradient)" filter="url(#glow)"/> <circle cx="420" cy="380" r="8" fill="url(#primaryGradient)" filter="url(#glow)"/> <circle cx="450" cy="150" r="10" fill="url(#bookGradient)" filter="url(#glow)"/> <circle cx="60" cy="180" r="6" fill="url(#codeGradient)" filter="url(#glow)"/> <!-- 连接线 --> <line x1="80" y1="400" x2="140" y2="350" stroke="url(#accentGradient)" stroke-width="3" opacity="0.4"/> <line x1="420" y1="380" x2="380" y2="320" stroke="url(#primaryGradient)" stroke-width="3" opacity="0.4"/> <line x1="450" y1="150" x2="400" y2="120" stroke="url(#bookGradient)" stroke-width="3" opacity="0.4"/> <line x1="60" y1="180" x2="100" y2="140" stroke="url(#codeGradient)" stroke-width="3" opacity="0.4"/> <!-- 数据流动效果 --> <circle cx="110" cy="375" r="3" fill="white" opacity="0.8"> <animate attributeName="opacity" values="0.8;0.3;0.8" dur="2s" repeatCount="indefinite"/> </circle> <circle cx="400" cy="350" r="3" fill="white" opacity="0.8"> <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/> </circle> </g> <!-- 闪光效果 --> <g opacity="0.7"> <g transform="translate(120, 160)"> <path d="M0 0 L8 0 L6 8 L12 8 L4 16 L6 8 L0 8 Z" fill="white" opacity="0.9" filter="url(#glow)"> <animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/> </path> </g> <circle cx="350" cy="300" r="4" fill="white" opacity="0.9"> <animate attributeName="opacity" values="0.9;0.4;0.9" dur="3s" repeatCount="indefinite"/> </circle> <circle cx="100" cy="350" r="3" fill="white" opacity="0.8"> <animate attributeName="opacity" values="0.4;0.8;0.4" dur="2.5s" repeatCount="indefinite"/> </circle> </g> <!-- 底部文字标识 --> <g transform="translate(0, 450)"> <text x="256" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="url(#primaryGradient)"> DevPedia Hub </text> <text x="256" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="normal" fill="url(#accentGradient)" opacity="0.8"> 开发者知识百科 </text> </g> </svg> High-Quality Vector Graphics | SVGX