AI编程:搞定复杂图的绘制,含源代码分享
- 2026-10-21 13:26:29
<svg width="800" height="1100" viewBox="0 0 800 1100" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 定义渐变和滤镜 -->
<defs>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.2"></feDropShadow>
</filter>
<linearGradient id="titleGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#D1D5DB"></stop>
<stop offset="100%" stop-color="#9CA3AF"></stop>
</linearGradient>
<linearGradient id="purpleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#8061a8"></stop>
<stop offset="100%" stop-color="#5b447a"></stop>
</linearGradient>
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#55a36b"></stop>
<stop offset="100%" stop-color="#3d754d"></stop>
</linearGradient>
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#c96d3c"></stop>
<stop offset="100%" stop-color="#9e542d"></stop>
</linearGradient>
<radialGradient id="bottomCircleGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f0f7"></stop>
<stop offset="100%" stop-color="#d9d2e6"></stop>
</radialGradient>
<linearGradient id="mainArrowGrad" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#e5e7eb"></stop>
<stop offset="50%" stop-color="#9ca3af"></stop>
<stop offset="100%" stop-color="#4b5563"></stop>
</linearGradient>
<!-- 箭头定义 -->
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#000"></polygon>
</marker>
<marker id="arrowheadBlack" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#333"></polygon>
</marker>
</defs>
<!-- 1. 外部圆角大边框 -->
<rect x="40" y="50" width="715" height="977" rx="60" stroke="#000" stroke-width="1.5" fill="#fff"></rect>
<!-- 2. 顶部标题框 -->
<path d="M 210 35 L 590 35 L 610 55 L 610 115 L 590 135 L 210 135 L 190 115 L 190 55 Z" fill="url(#titleGrad)" stroke="#000" stroke-width="1.5"></path>
<text x="400" y="99" font-family="SimHei, sans-serif" font-size="26" font-weight="bold" text-anchor="middle" fill="#000" class="" style="opacity: 1;">核心素养导向下幼儿自主学习路径</text>
<!-- 3. 中央贯穿大箭头 -->
<path d="M 385 960 L 415 960 L 415 220 L 460 220 L 400 150 L 340 220 L 385 220 Z" fill="url(#mainArrowGrad)" opacity="0.8"></path>
<!-- 4. 左侧侧边栏标签 -->
<g font-family="SimHei" font-size="20" fill="#fff" text-anchor="middle">
<!-- 系统支持层 -->
<rect x="35" y="220" width="45" height="150" rx="10" fill="url(#orangeGrad)"></rect>
<text x="58" y="295" style="writing-mode: tb;">系统支持层</text>
<path d="M 57 210 L 57 180" stroke="#000" stroke-width="1.5" marker-end="url(#arrowhead)"></path>
<!-- 过程引导层 -->
<rect x="35" y="460" width="45" height="150" rx="10" fill="url(#greenGrad)"></rect>
<text x="58" y="535" style="writing-mode: tb;">过程引导层</text>
<path d="M 57 450 L 57 380" stroke="#000" stroke-width="1.5" marker-end="url(#arrowhead)"></path>
<!-- 基础驱动层 -->
<rect x="35" y="700" width="45" height="150" rx="10" fill="url(#purpleGrad)"></rect>
<text x="58" y="775" style="writing-mode: tb;">基础驱动层</text>
<path d="M 57 690 L 57 620" stroke="#000" stroke-width="1.5" marker-end="url(#arrowhead)"></path>
</g>
<!-- 5. 右侧侧边栏内容（已替换为教育内容） -->
<g font-family="SimHei" font-size="19" fill="#fff" text-anchor="middle">
<!-- 对应系统支持 -->
<rect x="720" y="220" width="45" height="150" rx="10" fill="url(#orangeGrad)"></rect>
<text x="742" y="295" style="writing-mode: tb; letter-spacing: 2px;">评价资源整合</text>
<!-- 对应过程引导 -->
<rect x="720" y="460" width="45" height="150" rx="10" fill="url(#greenGrad)"></rect>
<text x="742" y="535" style="writing-mode: tb; letter-spacing: 2px;">支架探究支持</text>
<!-- 对应基础驱动 -->
<rect x="720" y="700" width="45" height="150" rx="10" fill="url(#purpleGrad)"></rect>
<text x="742" y="775" style="writing-mode: tb; letter-spacing: 2px;">习惯动力激发</text>
<!-- 指向箭头 -->
<path d="M 742 450 L 742 380" stroke="#000" stroke-width="1.5" marker-end="url(#arrowhead)"></path>
<path d="M 742 690 L 742 620" stroke="#000" stroke-width="1.5" marker-end="url(#arrowhead)"></path>
</g>
<!-- 6. 底部基础驱动层：内驱动力激发 -->
<g transform="translate(400, 830)">
<ellipse cx="-4" cy="0" rx="301" ry="120" fill="url(#bottomCircleGrad)" stroke="#6d5494" stroke-width="3" opacity="0.6"></ellipse>
<text y="-25" font-family="SimHei" font-size="28" font-weight="bold" text-anchor="middle" fill="#333">内驱动力激发</text>
<text x="2" y="16" font-family="SimHei" font-size="20" text-anchor="middle" fill="#333">兴趣触发点</text>
<text x="2" y="51" font-family="SimHei" font-size="20" text-anchor="middle" fill="#333">习惯养成期</text>
<!-- 子项 ① 探索好奇 -->
<g transform="translate(-180, -10)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="#a892c5" stroke="#6d5494" stroke-width="2" opacity="0.8"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">① 探索好奇</text>
<text x="-52" y="45" font-family="SimHei" font-size="18" fill="#333" text-anchor="end">发现问题</text>
<text x="20" y="60" font-family="SimHei" font-size="18" fill="#333" text-anchor="end">主动探究</text>
</g>
<!-- 子项 ② 自主性塑造 -->
<g transform="translate(0, 100)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="#a892c5" stroke="#6d5494" stroke-width="2" opacity="0.8"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">② 自主塑造</text>
<text x="94" y="-10" font-family="SimHei" font-size="18" fill="#333" text-anchor="start">自我选择权</text>
<text x="190" y="11" font-family="SimHei" font-size="18" fill="#333" text-anchor="start">计划制定</text>
</g>
<!-- 子项 ③ 情绪调节 -->
<g transform="translate(180, -10)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="#a892c5" stroke="#6d5494" stroke-width="2" opacity="0.8"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">③ 情绪调节</text>
<g font-family="SimHei" font-size="18" fill="#333">
<text x="-463" y="-25" text-anchor="middle" style="writing-mode: tb;">挫折应对</text>
<text x="60" y="55" text-anchor="middle">自信</text>
<text x="110" y="-10" text-anchor="middle" style="writing-mode: tb;">自我激励</text>
</g>
</g>
</g>
<!-- 7. 中间过程引导层：支架式教学引导 -->
<defs>
<radialGradient id="midCircleGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#e9f5ed"></stop>
<stop offset="100%" stop-color="#cfdfd4"></stop>
</radialGradient>
<linearGradient id="subGreenGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#76b88a"></stop>
<stop offset="100%" stop-color="#4e8a61"></stop>
</linearGradient>
</defs>
<g transform="translate(400, 680)">
<path id="curveBottom" d="M -260 0 A 260 100 0 0 1 260 0" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="5,5" transform="translate(0,69)"></path>
<text font-family="SimHei" font-size="18" fill="#333" text-anchor="middle">
<textPath href="#curveBottom" startOffset="50%">学习习惯内化</textPath>
</text>
</g>
<g transform="translate(400, 520)">
<ellipse cx="-6" cy="-30" rx="245" ry="120" fill="url(#midCircleGrad)" stroke="#4e8a61" stroke-width="3" opacity="0.7"></ellipse>
<text y="-46" font-family="SimHei" font-size="28" font-weight="bold" text-anchor="middle" fill="#333">支架式教学引导</text>
<g font-family="SimHei" font-size="20" fill="#333" text-anchor="middle">
<circle cx="-75" cy="15" r="3" fill="#333"></circle>
<text x="0" y="23">探究式学习工具</text>
<circle cx="-60" cy="45" r="3" fill="#333"></circle>
<text x="-161" y="125">思维可视化</text>
</g>
<!-- 子项 ① 启发对话 -->
<g transform="translate(-200, -10)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="url(#subGreenGrad)" stroke="#3d754d" stroke-width="2"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">① 启发对话</text>
</g>
<!-- 子项 ② 协作探究 -->
<g transform="translate(0, 100)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="url(#subGreenGrad)" stroke="#3d754d" stroke-width="2"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">② 协作探究</text>
</g>
<!-- 子项 ③ 经验总结 -->
<g transform="translate(200, -10)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="url(#subGreenGrad)" stroke="#3d754d" stroke-width="2"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">③ 经验总结</text>
<text x="-2" y="80" font-family="SimHei" font-size="18" fill="#333" text-anchor="start">反思分享环节</text>
</g>
<path id="curveTop" d="M -240 -60 A 240 80 0 0 1 240 -60" fill="none" stroke="#333" stroke-width="2" stroke-dasharray="4,4"></path>
<text font-family="SimHei" font-size="18" fill="#333">
<textPath href="#curveTop" startOffset="10%" class="" x="-29" y="-4">阶梯式引导设计</textPath>
<textPath href="#curveTop" startOffset="75%">提升元认知能力</textPath>
</text>
<text x="-206" y="77" font-family="SimHei" font-size="18" fill="#333" text-anchor="end">问题导向策略</text>
<path d="M -245 45 Q -270 45 -290 20" stroke="#000" stroke-width="1.5" stroke-dasharray="3,3" fill="none" marker-end="url(#arrowhead)"></path>
</g>
<!-- 8. 顶层系统支持层：环境场域建构 -->
<defs>
<radialGradient id="topCircleGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff4ed"></stop>
<stop offset="100%" stop-color="#f5e1d5"></stop>
</radialGradient>
<linearGradient id="subOrangeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#f0a378"></stop>
<stop offset="100%" stop-color="#d97d4a"></stop>
</linearGradient>
</defs>
<g transform="translate(400, 300)">
<ellipse cx="0" cy="0" rx="185" ry="120" fill="url(#topCircleGrad)" stroke="#d97d4a" stroke-width="3" opacity="0.8"></ellipse>
<text y="-10" font-family="SimHei" font-size="28" font-weight="bold" text-anchor="middle" fill="#333">环境场域建构</text>
<text y="30" font-family="SimHei" font-size="20" text-anchor="middle" fill="#333">● 动态资源评估</text>
<!-- 子项 ① 空间开放 -->
<g transform="translate(-180, 0)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="url(#subOrangeGrad)" stroke="#c96d3c" stroke-width="2"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">① 空间开放</text>
<g font-family="SimHei" font-size="16" fill="#333">
<text x="-10" y="-45" text-anchor="end">材料易得</text>
<path d="M -15 -40 L -30 -20" stroke="#333" stroke-width="1"></path>
<text x="-72" y="-12" text-anchor="end">布局自由</text>
<path d="M -60 5 L -75 0" stroke="#333" stroke-width="1"></path>
<text x="-15" y="65" text-anchor="end">功能分区</text>
<path d="M -15 55 L -30 30" stroke="#333" stroke-width="1"></path>
</g>
</g>
<!-- 子项 ② 弹性日程 -->
<g transform="translate(0, 80)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="url(#subOrangeGrad)" stroke="#c96d3c" stroke-width="2"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">② 弹性日程</text>
</g>
<!-- 子项 ③ 多元表征 -->
<g transform="translate(180, 0)">
<ellipse cx="0" cy="0" rx="75" ry="35" fill="url(#subOrangeGrad)" stroke="#c96d3c" stroke-width="2"></ellipse>
<text y="8" font-family="SimHei" font-size="20" font-weight="bold" text-anchor="middle" fill="#fff">③ 多元表征</text>
<g font-family="SimHei" font-size="16" fill="#333" text-anchor="start">
<text x="35" y="-40">学习记录袋</text>
<path d="M 30 -35 L 10 -20" stroke="#333" stroke-width="1"></path>
<text x="18" y="85">展示交流区</text>
<path d="M 30 65 L 10 30" stroke="#333" stroke-width="1"></path>
</g>
</g>
</g>
<!-- 9. 顶部终极目标 -->
<g>
<text x="240" y="184" font-family="SimHei" font-size="22" font-weight="bold" text-anchor="middle" fill="#333">促进幼儿全面发展</text>
<text x="560" y="183" font-family="SimHei" font-size="22" font-weight="bold" text-anchor="middle" fill="#333">塑造终身学习者</text>
<path d="M 280 215 Q 400 180 520 215" stroke="#333" stroke-width="3" stroke-dasharray="5,5" fill="none" marker-end="url(#arrowheadBlack)"></path>
<path d="M 520 215 Q 400 180 280 215" stroke="#333" stroke-width="3" stroke-dasharray="5,5" fill="none" marker-end="url(#arrowheadBlack)"></path>
</g>
</svg>
请根据我给你的文字内容，嵌套到这个视觉模板中（不要管模板和内容是否适配），然后输出套入后的SVG源码给我。
以下为我的内容：
填上你的内容或者主题，复制到deepseek即可绘制完成哦！
如果你还需要画更复杂的图，那么也可以交流！
