104 lines
5.2 KiB
XML
104 lines
5.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 580" preserveAspectRatio="xMidYMid slice">
|
||
<defs>
|
||
<!-- 主渐变 theme-blue -->
|
||
<linearGradient id="main" x1="0" y1="1" x2="0.8" y2="0">
|
||
<stop offset="0%" stop-color="#002d80"/>
|
||
<stop offset="15%" stop-color="#002d80"/>
|
||
<stop offset="40%" stop-color="#0052d9"/>
|
||
<stop offset="60%" stop-color="#0052d9"/>
|
||
<stop offset="85%" stop-color="#2b7de9"/>
|
||
<stop offset="100%" stop-color="#2b7de9"/>
|
||
</linearGradient>
|
||
<!-- 丝绸光带 -->
|
||
<linearGradient id="silk" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0"/>
|
||
<stop offset="20%" stop-color="white" stop-opacity="0.04"/>
|
||
<stop offset="45%" stop-color="white" stop-opacity="0.12"/>
|
||
<stop offset="55%" stop-color="white" stop-opacity="0.12"/>
|
||
<stop offset="80%" stop-color="white" stop-opacity="0.04"/>
|
||
<stop offset="100%" stop-color="white" stop-opacity="0"/>
|
||
</linearGradient>
|
||
<!-- 左上角深色 -->
|
||
<radialGradient id="darkTL" cx="-0.1" cy="-0.05" r="0.75" gradientUnits="objectBoundingBox">
|
||
<stop offset="0%" stop-color="black" stop-opacity="0.25"/>
|
||
<stop offset="45%" stop-color="black" stop-opacity="0"/>
|
||
</radialGradient>
|
||
<!-- 顶部深色 -->
|
||
<linearGradient id="darkTop" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="black" stop-opacity="0.18"/>
|
||
<stop offset="40%" stop-color="black" stop-opacity="0"/>
|
||
</linearGradient>
|
||
<!-- 左侧光晕 -->
|
||
<radialGradient id="glowL" cx="0.05" cy="0.4" r="0.65" gradientUnits="objectBoundingBox">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.12"/>
|
||
<stop offset="50%" stop-color="white" stop-opacity="0"/>
|
||
</radialGradient>
|
||
<!-- 右下角光晕 -->
|
||
<radialGradient id="glowBR" cx="0.85" cy="0.95" r="0.55" gradientUnits="objectBoundingBox">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.25"/>
|
||
<stop offset="55%" stop-color="white" stop-opacity="0"/>
|
||
</radialGradient>
|
||
<!-- 底部高光 -->
|
||
<linearGradient id="edgeHL" x1="0" y1="1" x2="0" y2="0">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.15"/>
|
||
<stop offset="25%" stop-color="white" stop-opacity="0"/>
|
||
</linearGradient>
|
||
<!-- 右上角光晕 -->
|
||
<radialGradient id="glowTR" cx="0.85" cy="0.1" r="0.55" gradientUnits="objectBoundingBox">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.4"/>
|
||
<stop offset="40%" stop-color="white" stop-opacity="0.1"/>
|
||
<stop offset="65%" stop-color="white" stop-opacity="0"/>
|
||
</radialGradient>
|
||
<!-- Aurora 丝带渐变 -->
|
||
<linearGradient id="r1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0.4"/>
|
||
<stop offset="50%" stop-color="white" stop-opacity="0.15"/>
|
||
<stop offset="100%" stop-color="white" stop-opacity="0.3"/>
|
||
</linearGradient>
|
||
<linearGradient id="r2" x1="0%" y1="100%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="black" stop-opacity="0.15"/>
|
||
<stop offset="50%" stop-color="white" stop-opacity="0.2"/>
|
||
<stop offset="100%" stop-color="black" stop-opacity="0.1"/>
|
||
</linearGradient>
|
||
<linearGradient id="r3" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="white" stop-opacity="0"/>
|
||
<stop offset="30%" stop-color="white" stop-opacity="0.35"/>
|
||
<stop offset="70%" stop-color="white" stop-opacity="0.35"/>
|
||
<stop offset="100%" stop-color="white" stop-opacity="0"/>
|
||
</linearGradient>
|
||
<filter id="aBlur"><feGaussianBlur stdDeviation="2"/></filter>
|
||
</defs>
|
||
|
||
<!-- 主渐变 -->
|
||
<rect width="750" height="580" fill="url(#main)"/>
|
||
<!-- 丝绸光带 -->
|
||
<rect width="750" height="580" fill="url(#silk)"/>
|
||
<!-- 左上角深色 -->
|
||
<rect width="750" height="580" fill="url(#darkTL)"/>
|
||
<!-- 顶部深色 -->
|
||
<rect width="750" height="580" fill="url(#darkTop)"/>
|
||
<!-- 左侧光晕 -->
|
||
<rect width="750" height="580" fill="url(#glowL)"/>
|
||
<!-- 右下角光晕 -->
|
||
<rect width="750" height="580" fill="url(#glowBR)"/>
|
||
<!-- 底部高光 -->
|
||
<rect width="750" height="580" fill="url(#edgeHL)"/>
|
||
<!-- 右上角光晕 -->
|
||
<rect width="750" height="580" fill="url(#glowTR)"/>
|
||
|
||
<!-- Aurora 丝带
|
||
原始 CSS: viewBox 400×200, background-size:480px 160px, background-position:center 40px, opacity:0.5
|
||
H5 画布 412px 宽 → 小程序 750rpx 宽，缩放比 750/412=1.820
|
||
x: (412-480)/2=-34 → -34×1.820=-61.9
|
||
y: 40px → 40×1.820=72.8
|
||
scale.x: 1.2×1.820=2.184
|
||
scale.y: 0.8×1.820=1.456
|
||
-->
|
||
<g opacity="0.5" transform="translate(-62,73) scale(2.184,1.456)">
|
||
<path d="M-50 180 Q80 100 180 140 T350 100 T500 140" fill="none" stroke="url(#r2)" stroke-width="60" stroke-linecap="round" filter="url(#aBlur)"/>
|
||
<path d="M-30 50 Q100 120 200 70 T380 110 T520 60" fill="none" stroke="url(#r1)" stroke-width="45" stroke-linecap="round"/>
|
||
<path d="M0 120 Q120 60 220 100 T420 70" fill="none" stroke="url(#r3)" stroke-width="25" stroke-linecap="round"/>
|
||
<path d="M50 90 Q150 150 280 90 T450 120" fill="none" stroke="white" stroke-opacity="0.25" stroke-width="8" stroke-linecap="round"/>
|
||
</g>
|
||
</svg>
|