独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMC 最终理想解 (IFR) 方案原理演示</title>
<style>
:root {
--bg-base: #060913;
--grid-line: rgba(30, 41, 59, 0.4);
--chassis-color: #334155;
--chassis-glow: rgba(148, 163, 184, 0.1);
--wire-base: #64748b;
--diff-mode: #10b981; /* 差模电流：绿色（安全/工作） */
--comm-mode: #ef4444; /* 共模电流：红色（危险/干扰） */
--ferrite: #0f172a;
--ferrite-border: #475569;
--text-main: #e2e8f0;
--text-muted: #94a3b8;
--highlight: #38bdf8;
--font-tech: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
--font-sans: system-ui, -apple-system, sans-serif;
}
body, html {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: var(--bg-base);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-sans);
color: var(--text-main);
}
/* 主容器，限制最大比例并居中 */
.stage {
position: relative;
width: 100%;
height: 100%;
max-width: 1600px;
max-height: 900px;
box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
}
svg {
width: 100%;
height: 100%;
display: block;
}
/* 纯 CSS 动画定义 */
/* 差模电流（工作电流）流动 */
@keyframes flow-differential {
0% { stroke-dashoffset: 100; }
100% { stroke-dashoffset: 0; }
}
/* 共模噪声（高频干扰）高频闪烁与流动 */
@keyframes flow-noise {
0% { stroke-dashoffset: 40; opacity: 0.8; filter: drop-shadow(0 0 5px var(--comm-mode)); }
50% { opacity: 1; filter: drop-shadow(0 0 12px var(--comm-mode)); }
100% { stroke-dashoffset: 0; opacity: 0.8; filter: drop-shadow(0 0 5px var(--comm-mode)); }
}
/* 磁环阻抗吸收效果（热量/磁场耗散） */
@keyframes pulse-absorb {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.4); opacity: 0.7; }
100% { transform: scale(1); opacity: 0.3; }
}
/* 辐射回路面积微光呼吸 */
@keyframes breathe-area {
0% { opacity: 0.15; }
50% { opacity: 0.3; }
100% { opacity: 0.15; }
}
/* SVG 内部元素的类绑定 */
.anim-diff {
stroke-dasharray: 8 12;
animation: flow-differential 1.5s linear infinite;
}
.anim-noise {
stroke-dasharray: 4 6;
animation: flow-noise 0.5s linear infinite;
}
.anim-absorb {
transform-origin: 290px 450px;
animation: pulse-absorb 1.2s ease-in-out infinite;
}
.anim-area {
animation: breathe-area 3s ease-in-out infinite;
}
/* 悬浮面板（极简设计，避免遮挡） */
.panel {
position: absolute;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(8px);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 8px;
padding: 16px;
pointer-events: none;
}
.panel-top-left { top: 32px; left: 32px; }
.panel-bottom-right { bottom: 32px; right: 32px; }
.panel-bottom-left { bottom: 32px; left: 32px; }
.panel-title {
font-size: 14px;
font-weight: 600;
color: var(--highlight);
margin-bottom: 8px;
letter-spacing: 1px;
text-transform: uppercase;
}
.panel-text {
font-size: 12px;
color: var(--text-muted);
line-height: 1.6;
font-family: var(--font-tech);
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.legend-color {
width: 12px;
height: 4px;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="stage">
<!-- 面板区域，严格限制大小和位置 -->
<div class="panel panel-top-left">
<div class="panel-title">IFR 最终理想解: EMC 抑制架构</div>
<div class="panel-text">
▶ 引入最少的新资源：利用底盘消除天线效应<br>
▶ 解决物理矛盾：扼流圈阻断共模，放行差模
</div>
</div>
<div class="panel panel-bottom-left">
<div class="panel-title">物理状态图例</div>
<div class="panel-text">
<div class="legend-item">
<div class="legend-color" style="background: var(--diff-mode);"></div>
<span>三相差模电流 (正常驱动)</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--comm-mode); box-shadow: 0 0 5px var(--comm-mode);"></div>
<span>30-120MHz 共模噪声 (被阻断)</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: var(--highlight); opacity: 0.5;"></div>
<span>最小化辐射回路面积</span>
</div>
</div>
</div>
<div class="panel panel-bottom-right">
<div class="panel-title">关键控制参数</div>
<div class="panel-text">
<span style="color: #cbd5e1">高度极限:</span> h ≤ 30mm (紧贴底盘)<br>
<span style="color: #cbd5e1">磁环阻抗:</span> Z ≥ 100Ω @ 100MHz<br>
<span style="color: #cbd5e1">线束工艺:</span> 绞合密度 30-50 转/米
</div>
</div>
<!-- 核心动态 SVG 画布 -->
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 背景网格图案 -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--grid-line)" stroke-width="0.5" />
<circle cx="40" cy="40" r="1" fill="rgba(148, 163, 184, 0.2)" />
</pattern>
<!-- 线束绞合纹理 -->
<pattern id="twist-pattern" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<rect width="20" height="20" fill="none" />
<line x1="0" y1="10" x2="20" y2="10" stroke="#cbd5e1" stroke-width="2" opacity="0.3" />
</pattern>
<!-- 底盘金属渐变 -->
<linearGradient id="metal-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#475569" />
<stop offset="20%" stop-color="#64748b" />
<stop offset="80%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</linearGradient>
<!-- 控制器外壳渐变 -->
<linearGradient id="box-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#020617" />
</linearGradient>
<!-- 发光滤镜 -->
<filter id="glow-red" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- ================= 背景层 ================= -->
<rect width="100%" height="100%" fill="url(#grid)" />
<!-- 坐标系或参考线 -->
<line x1="100" y1="750" x2="1500" y2="750" stroke="var(--grid-line)" stroke-width="1" stroke-dasharray="10 10" />
<text x="110" y="740" fill="var(--text-muted)" font-family="var(--font-tech)" font-size="10">BASE GROUND LEVEL (REF)</text>
<!-- ================= 物理结构层 ================= -->
<!-- 底盘金属面 (The Chassis) -->
<path d="M 100,750 L 1500,750 L 1480,780 L 120,780 Z" fill="url(#metal-grad)" stroke="#94a3b8" stroke-width="1" />
<rect x="100" y="750" width="1400" height="2" fill="#cbd5e1" opacity="0.5" />
<!-- 辐射回路面积高亮区 (IFR 核心：极小的面积) -->
<path d="M 450,710 L 1200,710 L 1200,750 L 450,750 Z" fill="var(--highlight)" class="anim-area" />
<!-- 行走/刀盘控制器 (Controller Box) -->
<rect x="120" y="300" width="220" height="350" rx="8" fill="url(#box-grad)" stroke="#334155" stroke-width="2" />
<rect x="140" y="320" width="180" height="80" rx="4" fill="#0f172a" stroke="#1e293b" />
<text x="230" y="365" fill="#e2e8f0" font-family="var(--font-tech)" font-size="16" text-anchor="middle" font-weight="bold">POWER CONTROLLER</text>
<circle cx="160" cy="430" r="4" fill="#10b981" filter="url(#glow-cyan)" />
<text x="175" y="434" fill="#94a3b8" font-family="var(--font-tech)" font-size="10">PWR ON</text>
<!-- 电机终端 (Motor) -->
<path d="M 1250,550 C 1250,500 1300,450 1350,450 C 1400,450 1450,500 1450,550 L 1450,750 L 1250,750 Z" fill="url(#box-grad)" stroke="#334155" stroke-width="2" />
<rect x="1230" y="600" width="20" height="80" fill="#475569" />
<rect x="1450" y="600" width="20" height="80" fill="#475569" />
<text x="1350" y="520" fill="#e2e8f0" font-family="var(--font-tech)" font-size="16" text-anchor="middle" font-weight="bold">3-PHASE MOTOR</text>
<!-- 线束主路径 (Wire Harness Base) -->
<path id="wire-path" d="M 340,450 L 400,450 Q 430,450 435,480 L 445,680 Q 450,710 480,710 L 1180,710 Q 1210,710 1215,680 L 1225,620 Q 1230,590 1250,590" fill="none" stroke="var(--wire-base)" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
<!-- 线束绞合纹理叠加 -->
<path d="M 340,450 L 400,450 Q 430,450 435,480 L 445,680 Q 450,710 480,710 L 1180,710 Q 1210,710 1215,680 L 1225,620 Q 1230,590 1250,590" fill="none" stroke="url(#twist-pattern)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" />
<!-- ================= 动态数据流层 ================= -->
<!-- 差模电流 (正常三相电，平稳穿过系统) -->
<path d="M 340,450 L 400,450 Q 430,450 435,480 L 445,680 Q 450,710 480,710 L 1180,710 Q 1210,710 1215,680 L 1225,620 Q 1230,590 1250,590" fill="none" stroke="var(--diff-mode)" stroke-width="2" class="anim-diff" stroke-linecap="round" stroke-linejoin="round" />
<path d="M 340,454 L 400,454 Q 426,454 431,480 L 441,680 Q 446,706 480,706 L 1180,706 Q 1206,706 1211,680 L 1221,620 Q 1226,594 1250,594" fill="none" stroke="var(--diff-mode)" stroke-width="1" class="anim-diff" opacity="0.6" stroke-linecap="round" stroke-linejoin="round" />
<path d="M 340,446 L 400,446 Q 434,446 439,480 L 449,680 Q 454,714 480,714 L 1180,714 Q 1214,714 1219,680 L 1229,620 Q 1234,586 1250,586" fill="none" stroke="var(--diff-mode)" stroke-width="1" class="anim-diff" opacity="0.6" stroke-linecap="round" stroke-linejoin="round" />
<!-- 共模噪声 (被磁环截断，只能在前半段存在) -->
<!-- 噪声尝试流出 -->
<path d="M 340,440 L 380,440 Q 385,440 385,450" fill="none" stroke="var(--comm-mode)" stroke-width="4" class="anim-noise" />
<path d="M 340,460 L 380,460 Q 385,460 385,450" fill="none" stroke="var(--comm-mode)" stroke-width="4" class="anim-noise" />
<!-- ================= 干预装置层 (IFR 破局点) ================= -->
<!-- 吸收辐射的能量波 (磁场阻抗表现) -->
<ellipse cx="380" cy="450" rx="20" ry="40" fill="none" stroke="var(--comm-mode)" stroke-width="2" class="anim-absorb" filter="url(#glow-red)" />
<ellipse cx="380" cy="450" rx="30" ry="50" fill="none" stroke="var(--comm-mode)" stroke-width="1" class="anim-absorb" style="animation-delay: 0.6s;" filter="url(#glow-red)" />
<!-- 镍锌铁氧体磁环 (Common-mode Choke) -->
<g transform="translate(365, 430)">
<rect x="0" y="0" width="30" height="40" rx="4" fill="var(--ferrite)" stroke="var(--ferrite-border)" stroke-width="2" />
<line x1="15" y1="0" x2="15" y2="40" stroke="#334155" stroke-width="1" stroke-dasharray="2 2" />
<rect x="5" y="-3" width="20" height="6" rx="2" fill="#475569" />
<rect x="5" y="37" width="20" height="6" rx="2" fill="#475569" />
</g>
<!-- ================= 标注与视觉引导层 ================= -->
<!-- 引导线 1: 扼流圈 -->
<polyline points="380,420 380,250 430,250" fill="none" stroke="var(--text-muted)" stroke-width="1" />
<circle cx="380" cy="420" r="3" fill="var(--highlight)" />
<text x="440" y="245" fill="var(--text-main)" font-family="var(--font-sans)" font-size="13" font-weight="bold">镍锌铁氧体磁环 (卡扣式)</text>
<text x="440" y="265" fill="var(--text-muted)" font-family="var(--font-tech)" font-size="11">呈现高频高阻抗，将共模噪声扼杀在源头</text>
<!-- 引导线 2: 紧贴底盘 -->
<polyline points="800,710 800,600 850,600" fill="none" stroke="var(--text-muted)" stroke-width="1" />
<circle cx="800" cy="710" r="3" fill="var(--highlight)" />
<text x="860" y="595" fill="var(--text-main)" font-family="var(--font-sans)" font-size="13" font-weight="bold">极低压敷设 (h ≤ 30mm)</text>
<text x="860" y="615" fill="var(--text-muted)" font-family="var(--font-tech)" font-size="11">线束贴近金属底盘，大幅缩减空间辐射等效天线高度</text>
<!-- 尺寸线: 30mm -->
<line x1="600" y1="718" x2="600" y2="742" stroke="#cbd5e1" stroke-width="1" />
<polygon points="600,710 596,718 604,718" fill="#cbd5e1" />
<polygon points="600,750 596,742 604,742" fill="#cbd5e1" />
<text x="610" y="734" fill="#cbd5e1" font-family="var(--font-tech)" font-size="11">h ≤ 30mm</text>
<!-- 尺寸线: 线束绞合 -->
<path d="M 1000,690 C 1020,670 1050,670 1070,690" fill="none" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2 2" />
<text x="980" y="665" fill="#cbd5e1" font-family="var(--font-tech)" font-size="11">绞合: 30-50 转/米</text>
</svg>
</div>
<!-- 简单的交互逻辑：页面加载即播，无需任何点击操作，确保符合需求中的 "重开即播" 且 "绝不依赖点击" -->
<script>
document.addEventListener("DOMContentLoaded", () => {
// CSS keyframes 已经处理了自动循环播放
// 此处留空保证了无额外的干扰逻辑，系统纯净运行
console.log("IFR SVG Animation initialized and auto-playing via CSS.");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRIZ 最终理想解：共模辐射(RE)抑制原理剖析</title>
<style>
/* 全局重置与变量定义 */
:root {
--bg-dark: #05080f;
--bg-panel: #0d1220;
--grid-line: #161e33;
--border-main: #1f2940;
--text-title: #ffffff;
--text-norm: #a1b0cc;
--text-muted: #64748b;
--color-dm: #00ff9d; /* 差模：青绿 */
--color-cm: #ff3366; /* 共模：亮红 */
--color-choke: #7b61ff; /* 扼流：亮紫 */
--color-metal: #94a3b8; /* 金属：冷灰 */
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: var(--bg-dark);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
color: var(--text-norm);
}
/* 主容器：限制最大宽高并保持比例 */
.app-container {
width: 100%;
height: 100%;
max-width: 1600px;
max-height: 1000px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* SVG 核心层，充满容器，带辉光阴影 */
svg.canvas {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 40px rgba(0,0,0,0.8));
}
/* =========================================
SVG CSS 动画定义 (无需 JS 介入，自动播放)
========================================= */
/* 差模电流：稳定快速的流动 */
.flow-dm {
stroke: var(--color-dm);
stroke-width: 3;
stroke-dasharray: 8 12;
stroke-linecap: round;
animation: dash-move-dm 0.8s linear infinite;
filter: url(#glow-green);
}
@keyframes dash-move-dm {
to { stroke-dashoffset: -40; }
}
/* 共模电流：剧烈的波纹流动 (进入磁环前) */
.flow-cm-strong {
stroke: var(--color-cm);
stroke-width: 4;
stroke-dasharray: 4 6 12 6;
stroke-linecap: round;
animation: dash-move-cm 0.4s linear infinite;
filter: url(#glow-red);
}
/* 抑制后的共模电流：微弱甚至消失 (磁环后) */
.flow-cm-weak {
stroke: rgba(255, 51, 102, 0.2);
stroke-width: 1;
stroke-dasharray: 2 18;
animation: dash-move-cm 2s linear infinite;
}
@keyframes dash-move-cm {
to { stroke-dashoffset: -32; }
}
/* 磁环脉冲发光 (表示高阻抗耗散) */
.choke-pulse {
animation: choke-glow 1.5s ease-in-out infinite alternate;
}
@keyframes choke-glow {
0% { filter: drop-shadow(0 0 5px var(--color-choke)); stroke-width: 1; }
100% { filter: drop-shadow(0 0 20px var(--color-choke)); stroke-width: 3; }
}
/* 受限的辐射场圈 (随时间扩大并消散，范围小) */
.radiation-wave {
fill: none;
stroke: rgba(255, 204, 0, 0.6);
stroke-width: 2;
transform-origin: center bottom;
animation: wave-expand 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
.radiation-wave:nth-child(2) { animation-delay: 0.6s; }
.radiation-wave:nth-child(3) { animation-delay: 1.2s; }
@keyframes wave-expand {
0% { transform: scale(0.2); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
/* 镜像磁场波 (微观视区中互相抵消的圈) */
.field-circle-real {
fill: none;
stroke: var(--color-cm);
stroke-width: 1.5;
opacity: 0.4;
animation: expand-circle 2s linear infinite;
}
.field-circle-image {
fill: none;
stroke: #0ea5e9;
stroke-width: 1.5;
opacity: 0.4;
animation: expand-circle 2s linear infinite;
}
@keyframes expand-circle {
0% { r: 5px; opacity: 0.8; }
100% { r: 80px; opacity: 0; }
}
/* HTML 浮层卡片样式 */
.info-card {
background: rgba(13, 18, 32, 0.85);
backdrop-filter: blur(8px);
border: 1px solid var(--border-main);
border-left: 4px solid var(--color-choke);
border-radius: 6px;
padding: 16px;
color: var(--text-norm);
font-size: 13px;
line-height: 1.6;
}
.info-card h3 {
margin: 0 0 8px 0;
color: var(--text-title);
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
}
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
margin-right: 6px;
}
.tag-dm { background: rgba(0, 255, 157, 0.15); color: var(--color-dm); border: 1px solid var(--color-dm); }
.tag-cm { background: rgba(255, 51, 102, 0.15); color: var(--color-cm); border: 1px solid var(--color-cm); }
/* 标注连线闪烁 */
.pointer-line {
stroke: var(--text-muted);
stroke-width: 1;
stroke-dasharray: 4 4;
animation: dash-move-dm 2s linear infinite;
}
</style>
</head>
<body>
<div class="app-container">
<!-- 核心 SVG 容器 (响应式 viewBox) -->
<svg class="canvas" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<!-- === 资源定义 (滤镜、渐变、图案) === -->
<defs>
<!-- 背景网格图案 -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<rect width="40" height="40" fill="none" />
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--grid-line)" stroke-width="1" />
</pattern>
<pattern id="grid-fine" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="10" height="10" fill="none" />
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(22, 30, 51, 0.3)" stroke-width="0.5" />
</pattern>
<!-- 发光滤镜 (性能优化配置) -->
<filter id="glow-green" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glow-red" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- 渐变定义 -->
<linearGradient id="grad-metal" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#cbd5e1" />
<stop offset="20%" stop-color="#64748b" />
<stop offset="100%" stop-color="#1e293b" />
</linearGradient>
<linearGradient id="grad-box" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</linearGradient>
<!-- 箭头标记 -->
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 2 L 8 5 L 0 8 z" fill="var(--color-metal)" />
</marker>
</defs>
<!-- === 背景层 === -->
<rect width="1440" height="900" fill="var(--bg-dark)" />
<rect width="1440" height="900" fill="url(#grid-fine)" />
<rect width="1440" height="900" fill="url(#grid)" />
<!-- 顶部主标题 (利用 foreignObject 渲染完美的 HTML 排版) -->
<foreignObject x="60" y="40" width="600" height="150">
<div xmlns="http://www.w3.org/1999/xhtml" style="color: white; font-family: sans-serif;">
<h1 style="margin:0; font-size: 28px; font-weight: 600; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255,255,255,0.3);">TRIZ <span style="color:var(--color-dm);">最终理想解 (IFR)</span></h1>
<p style="margin: 8px 0 0 0; color: var(--text-muted); font-size: 15px; max-width: 500px;">
消除动力线束共模发射 (30~120MHz) 垂直方向 RE 超标的终极形态。<br/>
<strong>核心思想：</strong>巧妙利用既有系统资源（磁环高频阻抗 + 底盘金属平面），在极小增加复杂度的情况下彻底化解矛盾。
</p>
</div>
</foreignObject>
<!-- === 1. 宏观系统视区 (Macroscopic View) === -->
<g id="macro-view" transform="translate(0, 50)">
<!-- 底盘金属接地平面 -->
<g id="chassis-ground">
<!-- 主底盘 -->
<rect x="80" y="380" width="1280" height="40" fill="url(#grad-metal)" rx="6" />
<!-- 底盘纹理线 -->
<line x1="80" y1="390" x2="1360" y2="390" stroke="#ffffff" stroke-width="1" opacity="0.3" />
<text x="720" y="405" fill="#0f172a" font-size="16" font-weight="bold" font-family="monospace" text-anchor="middle" letter-spacing="4">METAL CHASSIS GROUND PLANE / 结构金属底盘</text>
</g>
<!-- 主动力线束外皮基座 (加粗深色管) -->
<!-- 路径：控制器出发往下，极低高度贴地横行，再往上到电机 -->
<path d="M 220 220 L 220 350 Q 220 365 235 365 L 1205 365 Q 1220 365 1220 350 L 1220 220"
fill="none" stroke="#1e293b" stroke-width="20" stroke-linecap="round" />
<!-- 线束表面绞合纹理暗示 -->
<path d="M 220 220 L 220 350 Q 220 365 235 365 L 1205 365 Q 1220 365 1220 350 L 1220 220"
fill="none" stroke="#334155" stroke-width="4" stroke-dasharray="10 5" opacity="0.6" />
<!-- 电流动态模拟层 -->
<!-- 1. 差模电流 (全程无阻碍，绿光流动) -->
<path d="M 220 220 L 220 350 Q 220 365 235 365 L 1205 365 Q 1220 365 1220 350 L 1220 220"
fill="none" class="flow-dm" />
<!-- 2. 共模电流前段 (磁环前，剧烈红光) -->
<path d="M 220 220 L 220 270" fill="none" class="flow-cm-strong" />
<!-- 3. 共模电流后段 (磁环后，被完全抑制的残留) -->
<path d="M 220 280 L 220 350 Q 220 365 235 365 L 1205 365 Q 1220 365 1220 350 L 1220 220"
fill="none" class="flow-cm-weak" />
<!-- 共模扼流圈 / 镍锌铁氧体磁环 (套在线束上) -->
<!-- 左侧：控制器输出端 (核心阻断处) -->
<g transform="translate(220, 275)">
<!-- 磁环后背 -->
<rect x="-24" y="-18" width="48" height="36" fill="#0f172a" rx="4" />
<!-- 磁环主体剖面 -->
<rect x="-20" y="-14" width="40" height="28" fill="#1e1b4b" stroke="var(--color-choke)" stroke-width="2" class="choke-pulse" rx="2" />
<!-- 磁环内发光涡流，暗示能量耗散 -->
<circle cx="0" cy="0" r="10" fill="none" stroke="var(--color-choke)" stroke-width="1.5" opacity="0.6" />
<path d="M -15 0 L 15 0" stroke="var(--color-choke)" stroke-width="1" opacity="0.4"/>
</g>
<!-- 右侧：电机端 (可选附加磁环，吸收残余) -->
<g transform="translate(1220, 275)">
<rect x="-24" y="-18" width="48" height="36" fill="#0f172a" rx="4" />
<rect x="-20" y="-14" width="40" height="28" fill="#1e1b4b" stroke="var(--color-choke)" stroke-width="1" rx="2" opacity="0.8" />
</g>
<!-- 紧贴底盘的高度控制 (受限辐射场视觉表示) -->
<g transform="translate(720, 365)">
<!-- 向外扩散并消散的半圆形虚线波，表示受约束的小范围辐射 -->
<path d="M -80 0 A 80 80 0 0 1 80 0" class="radiation-wave" />
<path d="M -80 0 A 80 80 0 0 1 80 0" class="radiation-wave" />
<path d="M -80 0 A 80 80 0 0 1 80 0" class="radiation-wave" />
</g>
<!-- 高度尺寸标注 h ≤ 30mm -->
<g transform="translate(580, 0)">
<line x1="0" y1="365" x2="0" y2="380" stroke="#fcd34d" stroke-width="1.5" marker-start="url(#arrow)" marker-end="url(#arrow)" />
<line x1="-50" y1="365" x2="50" y2="365" stroke="var(--text-muted)" stroke-width="1" stroke-dasharray="2 2" />
<line x1="-50" y1="380" x2="50" y2="380" stroke="var(--text-muted)" stroke-width="1" stroke-dasharray="2 2" />
<text x="10" y="377" fill="#fcd34d" font-size="14" font-family="monospace" font-weight="bold">h ≤ 30mm</text>
<!-- 引出说明文字 -->
<path d="M 0 350 L -40 310 L -120 310" fill="none" class="pointer-line" />
<text x="-125" y="306" fill="var(--text-main)" font-size="12" text-anchor="end">等效天线高度极小化</text>
</g>
<!-- 设备：行走 / 刀盘控制器 (左) -->
<g transform="translate(100, 80)">
<rect width="240" height="140" fill="url(#grad-box)" stroke="#3b82f6" stroke-width="2" rx="8" />
<rect x="0" y="0" width="240" height="30" fill="#3b82f6" rx="8" clip-path="inset(0 0 0 0 round 8px 8px 0 0)"/>
<text x="120" y="20" fill="#ffffff" font-size="14" font-weight="bold" text-anchor="middle">行走/刀盘控制器 (干扰源)</text>
<!-- 面板参数细节 -->
<text x="20" y="60" fill="var(--text-norm)" font-size="12">▶ 输出: 三相动力驱动</text>
<text x="20" y="85" fill="var(--text-muted)" font-size="12">▶ 驱动电流(差模): 高效输出</text>
<text x="20" y="110" fill="var(--color-cm)" font-size="12">▶ 伴生噪声(共模): 30-120MHz</text>
<!-- 出线口接口端子 -->
<rect x="95" y="140" width="50" height="10" fill="#475569" />
</g>
<!-- 设备：驱动电机 (右) -->
<g transform="translate(1100, 80)">
<rect width="240" height="140" fill="url(#grad-box)" stroke="#10b981" stroke-width="2" rx="8" />
<rect x="0" y="0" width="240" height="30" fill="#10b981" rx="8" clip-path="inset(0 0 0 0 round 8px 8px 0 0)"/>
<text x="120" y="20" fill="#0f172a" font-size="14" font-weight="bold" text-anchor="middle">驱动电机 (负载终端)</text>
<text x="120" y="80" fill="var(--color-dm)" font-size="28" font-weight="bold" text-anchor="middle">平稳运行</text>
<text x="120" y="110" fill="var(--text-muted)" font-size="12" text-anchor="middle">无辐射泄漏，纯净驱动输入</text>
<rect x="95" y="140" width="50" height="10" fill="#475569" />
</g>
</g> <!-- Macro View End -->
<!-- === 下方：微观机制并排解析区 === -->
<!-- 微观视口 A: 共模阻抗扼流分析 -->
<g transform="translate(80, 520)">
<!-- 容器框 -->
<rect width="600" height="320" fill="var(--bg-panel)" stroke="var(--border-main)" stroke-width="1.5" rx="12" />
<!-- 卡片内嵌 HTML 解析信息 -->
<foreignObject x="20" y="20" width="560" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" class="info-card">
<h3>[微观剖析 A] 磁环源头阻断机制</h3>
资源利用：无需复杂滤波电路，仅在源端套接 2-4 个镍锌铁氧体磁环。<br/>
原理解构：高频下呈现 <span style="color:var(--color-choke); font-weight:bold;">Z ≥ 100Ω @100MHz</span> 的纯电阻特性，将共模能量转化为微热耗散，而对低频差模透明。
</div>
</foreignObject>
<!-- 放大示意图：磁环截面内的高阻抗耗散 -->
<g transform="translate(300, 200)">
<!-- 线束内部导线 -->
<rect x="-240" y="-12" width="480" height="24" fill="#334155" rx="6" />
<!-- 截面的上下两半铁氧体 (深蓝紫) -->
<!-- 上半截 -->
<path d="M -50 -40 L 50 -40 L 50 -14 L -50 -14 Z" fill="#1e1b4b" stroke="var(--color-choke)" stroke-width="2" />
<!-- 下半截 -->
<path d="M -50 14 L 50 14 L 50 40 L -50 40 Z" fill="#1e1b4b" stroke="var(--color-choke)" stroke-width="2" />
<text x="0" y="-50" fill="var(--color-choke)" font-size="12" text-anchor="middle" font-weight="bold">铁氧体高阻抗耗散区</text>
<!-- 进入的强共模 (左侧红波) -->
<path d="M -220 0 Q -180 -30 -140 0 T -60 0" fill="none" class="flow-cm-strong" stroke-width="5" />
<!-- 磁环内部的耗散 (紫光漩涡/网格交错) -->
<g stroke="var(--color-choke)" stroke-width="1.5" opacity="0.7">
<line x1="-40" y1="-10" x2="-20" y2="10" />
<line x1="-20" y1="-10" x2="0" y2="10" />
<line x1="0" y1="-10" x2="20" y2="10" />
<line x1="20" y1="-10" x2="40" y2="10" />
</g>
<!-- 出去后几乎消失的共模 (右侧平直微弱红线) -->
<path d="M 60 0 L 220 0" fill="none" class="flow-cm-weak" stroke-width="2" />
<!-- 始终平滑通过的差模 (底层平行绿线) -->
<path d="M -220 18 L 220 18" fill="none" class="flow-dm" stroke-width="3" />
<path d="M -220 -18 L 220 -18" fill="none" class="flow-dm" stroke-width="3" />
<!-- 标识说明 -->
<text x="-150" y="-35" fill="var(--color-cm)" font-size="14" font-weight="bold">强共模干扰输入</text>
<text x="150" y="-35" fill="var(--text-muted)" font-size="14">被阻断 / 纯净输出</text>
</g>
</g>
<!-- 微观视口 B: 辐射环路约束分析 -->
<g transform="translate(720, 520)">
<!-- 容器框 -->
<rect width="640" height="320" fill="var(--bg-panel)" stroke="var(--border-main)" stroke-width="1.5" rx="12" />
<!-- 卡片内嵌 HTML 解析信息 -->
<foreignObject x="20" y="20" width="600" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" class="info-card">
<h3>[微观剖析 B] 空间辐射闭环约束 (镜像效应)</h3>
资源利用：利用既有大面积底盘金属作为天然的回流平面。<br/>
原理解构：线束紧贴敷设，使得物理电流与其在金属平面的<strong>反向镜像电流</strong>距离极近 (h)。此时空间辐射向量互相抵消，等效辐射回路面积趋于 0，消除 RE 发射。
</div>
</foreignObject>
<!-- 放大示意图：截面视角电磁场对消 -->
<g transform="translate(320, 200)">
<!-- 金属底盘截面 (无限大平面) -->
<rect x="-240" y="30" width="480" height="40" fill="url(#grad-metal)" rx="4" />
<text x="-180" y="55" fill="#0f172a" font-size="14" font-weight="bold">金属底盘 (回流平面)</text>
<!-- 导线截面 (上方空中的圆) -->
<circle cx="0" cy="-30" r="12" fill="#1e293b" stroke="#475569" stroke-width="3" />
<text x="-35" y="-25" fill="var(--text-main)" font-size="14" text-anchor="end">动力线束</text>
<!-- 导线内的共模电流 (进入屏幕，红叉) -->
<path d="M -5 -35 L 5 -25 M -5 -25 L 5 -35" stroke="var(--color-cm)" stroke-width="2" filter="url(#glow-red)" />
<!-- 底盘内的镜像电流 (穿出屏幕，蓝点) -->
<circle cx="0" cy="50" r="12" fill="#0f172a" stroke="#0ea5e9" stroke-width="2" stroke-dasharray="2 2" />
<circle cx="0" cy="50" r="3" fill="#0ea5e9" />
<text x="-25" y="55" fill="#0ea5e9" font-size="14" text-anchor="end">等效镜像电流</text>
<!-- 空间磁场互相抵消的可视化 -->
<!-- 线上方发出的场 (部分被抵消) -->
<circle cx="0" cy="-30" r="40" class="field-circle-real" />
<circle cx="0" cy="-30" r="70" class="field-circle-real" style="animation-delay: 1s;" />
<!-- 底盘下方发出的反向场 -->
<circle cx="0" cy="50" r="40" class="field-circle-image" />
<circle cx="0" cy="50" r="70" class="field-circle-image" style="animation-delay: 1s;" />
<!-- 抵消面的高光标记 -->
<path d="M -150 10 Q 0 10 150 10" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.3" stroke-dasharray="8 8" />
<text x="160" y="15" fill="#f8fafc" font-size="12">矢量抵消平面 (H场极度衰减)</text>
<!-- 极小的高度 h 标注 -->
<line x1="30" y1="-18" x2="30" y2="30" stroke="#fcd34d" stroke-width="1.5" marker-start="url(#arrow)" marker-end="url(#arrow)" />
<text x="45" y="12" fill="#fcd34d" font-size="14" font-weight="bold">h ≤ 30mm</text>
</g>
</g>
<!-- 装饰性角标元素 -->
<path d="M 20 20 L 40 20 L 40 40" fill="none" stroke="var(--text-muted)" stroke-width="2" opacity="0.5" />
<path d="M 1420 20 L 1400 20 L 1400 40" fill="none" stroke="var(--text-muted)" stroke-width="2" opacity="0.5" />
<path d="M 20 880 L 40 880 L 40 860" fill="none" stroke="var(--text-muted)" stroke-width="2" opacity="0.5" />
<path d="M 1420 880 L 1400 880 L 1400 860" fill="none" stroke="var(--text-muted)" stroke-width="2" opacity="0.5" />
</svg>
</div>
</body>
</html>
积分规则：每轮对话扣10分
等待动画代码生成...