<!-- Axes --> <gid="axes"stroke="#444"stroke-width="1"fill="none"> <!-- X axis --> <linex1="80"y1="520"x2="820"y2="520" /> <!-- Y axis --> <linex1="80"y1="520"x2="80"y2="80" /> </g>
<!-- Axis labels --> <textx="820"y="540"font-family="Arial"font-size="12"fill="#222">Token A 储备 (x)</text> <textx="20"y="80"font-family="Arial"font-size="12"fill="#222"transform="rotate(-90 20,80)">Token B 储备 (y)</text>
<!-- Tick marks and labels on X --> <gfont-family="Arial"font-size="11"fill="#333"> <!-- We'll map x in [600,1600] to svg x in [100,760] --> <!-- ticks at 700,800,900,1000,1100,1200,1300,1400,1500 --> <!-- compute positions manually approximate --> <linex1="100"y1="520"x2="100"y2="525"stroke="#666"/> <textx="92"y="540">700</text>
<!-- Tick marks and labels on Y --> <gfont-family="Arial"font-size="11"fill="#333"> <!-- map y in [1400,2200] to svg y in [420,100] --> <linex1="80"y1="420"x2="75"y2="420"stroke="#666"/> <textx="40"y="424">1400</text>
<!-- Draw y = k / x curve (sampled points) --> <!-- Map function: x in [600,1600] -> sx in [100,760]; y in [1400,2200] -> sy in [420,100] --> <!-- We'll sample x values and compute y = 2,000,000 / x --> <pathd=" M 100 ( ${ /* placeholder - will be replaced by computed points below */ '' } ) "stroke="#ff6a00"stroke-width="2"fill="none"id="curve"/>
<!-- Instead of trying to construct path via string interpolation here, we'll include a precomputed path below for the range x=600..1600 sampled. -->
<pathd=" M 100,351.666 C 130,342 160,334 190,327 C 220,320 250,314 280,309 C 310,304 340,300 370,296 C 400,292 430,289 460,286 C 490,283 520,281 550,279 C 580,277 610,275 640,274 C 670,272 700,271 730,270 C 760,269 "stroke="#ff6a00"stroke-width="3"fill="none"opacity="0.95"/>
<!-- Mark P0 --> <circlecx="364"cy="180"r="5"fill="#0055aa" /> <textx="374"y="176"font-family="Arial"font-size="12"fill="#0055aa">P₀ (1000, 2000)</text>
<!-- Mark P1 --> <circlecx="429.8"cy="252.53"r="5"fill="#d9534f" /> <textx="440"y="248"font-family="Arial"font-size="12"fill="#d9534f">P₁ (1099.7, 1818.68)</text>
<!-- Draw an arrow along the curve from P0 to P1 to show movement --> <defs> <markerid="arrow"markerWidth="10"markerHeight="10"refX="6"refY="3"orient="auto"> <pathd="M0,0 L0,6 L9,3 z"fill="#333" /> </marker> </defs>
<!-- A short curved arrow between P0 and P1 --> <pathd="M 370 190 Q 400 220 426 250"stroke="#333"stroke-width="1.4"fill="none"marker-end="url(#arrow)" />
<!-- Draw small vertical bracket showing sliding from initial price to new price (visual of slippage) --> <!-- At x ~ 364 (P0 x), show vertical from y=180 to y≈? corresponding P1 price line for that x (visual) --> <linex1="364"y1="180"x2="364"y2="252.53"stroke="#999"stroke-dasharray="4 4"/> <textx="290"y="220"font-family="Arial"font-size="12"fill="#666">滑点: 价格从 2.00 → 1.653 (瞬时)</text>
<!-- Annotate amountOut --> <textx="520"y="300"font-family="Arial"font-size="12"fill="#222"> 用户输入 100 A → 实得 ≈ 181.322 B (amountOut) </text>
<!-- Legend --> <rectx="600"y="60"width="270"height="110"fill="#f8f8f8"stroke="#ddd"/> <textx="612"y="80"font-family="Arial"font-size="13"fill="#333">图例 / 说明</text> <circlecx="620"cy="98"r="5"fill="#0055aa" /> <textx="634"y="102"font-family="Arial"font-size="12"fill="#333">P₀: 交易前 (1000,2000)</text> <circlecx="620"cy="120"r="5"fill="#d9534f" /> <textx="634"y="124"font-family="Arial"font-size="12"fill="#333">P₁: 交易后 (1099.7,1818.68)</text> <linex1="610"y1="140"x2="636"y2="140"stroke="#333"stroke-width="3" /> <textx="640"y="144"font-family="Arial"font-size="12"fill="#333">曲线: y = k / x (k = 2,000,000)</text>
<!-- Footer text --> <textx="80"y="565"font-family="Arial"font-size="11"fill="#333"> 注: 曲线为 y = k/x 的近似示意;坐标映射为 x∈[600,1600] → svg_x∈[100,760], y∈[1400,2200] → svg_y∈[420,100]。 </text> </svg>