55 lines
2.7 KiB
XML
55 lines
2.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<defs>
|
|
<!-- 杯身渐变：深棕到焦糖色 -->
|
|
<linearGradient id="cupGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#5C3317"/>
|
|
<stop offset="40%" stop-color="#8B4513"/>
|
|
<stop offset="100%" stop-color="#A0522D"/>
|
|
</linearGradient>
|
|
<!-- 液体渐变 -->
|
|
<linearGradient id="liquidGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#C0392B"/>
|
|
<stop offset="50%" stop-color="#922B21"/>
|
|
<stop offset="100%" stop-color="#6E2C00"/>
|
|
</linearGradient>
|
|
<!-- 高光 -->
|
|
<linearGradient id="cupShine" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
|
</linearGradient>
|
|
<clipPath id="cupClip">
|
|
<path d="M14 10 L34 10 L31 40 L17 40 Z"/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<!-- 圆角背景 -->
|
|
<rect x="2" y="2" width="44" height="44" rx="12" ry="12" fill="#1A1A2E"/>
|
|
|
|
<!-- 杯身 - 梯形 -->
|
|
<path d="M14 11 L34 11 L31.5 39 L16.5 39 Z" fill="url(#cupGrad)" opacity="0.9"/>
|
|
|
|
<!-- 液体填充 -->
|
|
<g clip-path="url(#cupClip)">
|
|
<rect x="14" y="18" width="20" height="22" fill="url(#liquidGrad)"/>
|
|
<!-- 液面波浪 -->
|
|
<path d="M14 18 Q19 15 24 18 Q29 21 34 18 L34 40 L14 40 Z" fill="#C0392B" opacity="0.6"/>
|
|
</g>
|
|
|
|
<!-- 气泡 - 大小不一，从底部上升 -->
|
|
<circle cx="20" cy="32" r="2.5" fill="none" stroke="#FFFFFF" stroke-width="1" opacity="0.7"/>
|
|
<circle cx="27" cy="28" r="1.8" fill="none" stroke="#FFFFFF" stroke-width="0.8" opacity="0.6"/>
|
|
<circle cx="23" cy="24" r="2" fill="none" stroke="#FFFFFF" stroke-width="0.8" opacity="0.5"/>
|
|
<circle cx="29" cy="35" r="1.5" fill="none" stroke="#FFFFFF" stroke-width="0.7" opacity="0.65"/>
|
|
<circle cx="18" cy="26" r="1.2" fill="none" stroke="#FFFFFF" stroke-width="0.7" opacity="0.45"/>
|
|
<circle cx="25" cy="21" r="1.4" fill="none" stroke="#FFFFFF" stroke-width="0.7" opacity="0.4"/>
|
|
<circle cx="22" cy="36" r="1" fill="none" stroke="#FFFFFF" stroke-width="0.6" opacity="0.55"/>
|
|
<circle cx="30" cy="22" r="0.9" fill="none" stroke="#FFFFFF" stroke-width="0.6" opacity="0.35"/>
|
|
|
|
<!-- 飘出杯口的气泡 - 表示冒泡活力 -->
|
|
<circle cx="20" cy="7" r="2" fill="none" stroke="#FF6B35" stroke-width="0.8" opacity="0.7"/>
|
|
<circle cx="27" cy="4" r="1.5" fill="none" stroke="#FF8C5A" stroke-width="0.7" opacity="0.6"/>
|
|
<circle cx="32" cy="8" r="1" fill="none" stroke="#FFB088" stroke-width="0.6" opacity="0.5"/>
|
|
|
|
<!-- 杯身高光 -->
|
|
<path d="M16 11 L17 39" stroke="url(#cupShine)" stroke-width="3" opacity="0.4" stroke-linecap="round"/>
|
|
</svg> |