| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="sunsetBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 4 | <stop offset="0%" stop-color="#1A0A2E"/> |
| 5 | <stop offset="50%" stop-color="#2E1A0A"/> |
| 6 | <stop offset="100%" stop-color="#0A1A2E"/> |
| 7 | </linearGradient> |
| 8 | <linearGradient id="sunsetGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 9 | <stop offset="0%" stop-color="#F5A623"/> |
| 10 | <stop offset="40%" stop-color="#CC4A2A"/> |
| 11 | <stop offset="100%" stop-color="#7C3A7A"/> |
| 12 | </linearGradient> |
| 13 | <!-- 从左下到右上的渐变遮罩：右上角暗，左下角透明 --> |
| 14 | <linearGradient id="textMask" x1="0%" y1="100%" x2="100%" y2="0%"> |
| 15 | <stop offset="0%" stop-color="#0A0A1A" stop-opacity="0"/> |
| 16 | <stop offset="45%" stop-color="#0A0A1A" stop-opacity="0"/> |
| 17 | <stop offset="65%" stop-color="#0A0A1A" stop-opacity="0.75"/> |
| 18 | <stop offset="100%" stop-color="#0A0A1A" stop-opacity="0.9"/> |
| 19 | </linearGradient> |
| 20 | </defs> |
| 21 | |
| 22 | <!-- 背景 --> |
| 23 | <rect width="1280" height="720" fill="url(#sunsetBg)"/> |
| 24 | |
| 25 | <!-- 图像全幅铺底 --> |
| 26 | <image href="../images/p13_diagonal_img.png" x="0" y="0" width="1280" height="720" |
| 27 | preserveAspectRatio="xMidYMid slice"/> |
| 28 | |
| 29 | <!-- 右上区域渐变遮罩，沿对角线方向自然过渡 --> |
| 30 | <rect width="1280" height="720" fill="url(#textMask)"/> |
| 31 | |
| 32 | <!-- 对角线：左上(0,0) → 右下(1280,720) --> |
| 33 | <line x1="0" y1="0" x2="1280" y2="720" stroke="url(#sunsetGrad)" stroke-width="2.5" stroke-opacity="0.85"/> |
| 34 | <line x1="0" y1="3" x2="1277" y2="723" stroke="#F5A623" stroke-width="1" stroke-opacity="0.25"/> |
| 35 | <line x1="3" y1="0" x2="1283" y2="717" stroke="#7C3A7A" stroke-width="1" stroke-opacity="0.25"/> |
| 36 | |
| 37 | <!-- 页面标签 --> |
| 38 | <text x="900" y="44" font-family="Arial, sans-serif" font-size="12" |
| 39 | fill="#F5A623" fill-opacity="0.65" letter-spacing="2">P13 · fantasy-animation × sunset-gradient</text> |
| 40 | |
| 41 | <!-- 右上文字区 — 从 x=700 开始，只在上半部 --> |
| 42 | <text x="720" y="116" font-family="Georgia, 'Microsoft YaHei', serif" |
| 43 | font-size="44" font-weight="bold" fill="#E8E8F0">对角线分割</text> |
| 44 | |
| 45 | <line x1="720" y1="132" x2="1230" y2="132" stroke="url(#sunsetGrad)" stroke-width="1.5" stroke-opacity="0.5"/> |
| 46 | |
| 47 | <text x="720" y="168" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 48 | font-size="17" fill="#F5A623">fantasy-animation</text> |
| 49 | <text x="720" y="192" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 50 | font-size="15" fill="#C0C0C8">吉卜力风梦幻动画</text> |
| 51 | |
| 52 | <text x="720" y="228" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 53 | font-size="17" fill="#CC7A4A">sunset-gradient</text> |
| 54 | <text x="720" y="252" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 55 | font-size="15" fill="#C0C0C8">暖调落日渐变色板</text> |
| 56 | |
| 57 | <line x1="720" y1="274" x2="1230" y2="274" stroke="#E8E8F0" stroke-opacity="0.1" stroke-width="1"/> |
| 58 | |
| 59 | <text x="720" y="306" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 60 | font-size="17" fill="#E8E8F0">对角线从左上贯穿至右下，</text> |
| 61 | <text x="720" y="332" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 62 | font-size="15" fill="#C0C0C8">将画面一切为二：</text> |
| 63 | <text x="720" y="358" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 64 | font-size="15" fill="#C0C0C8">· 左下三角 ── 图像叙事</text> |
| 65 | <text x="720" y="382" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 66 | font-size="15" fill="#C0C0C8">· 右上三角 ── 文字解析</text> |
| 67 | <text x="720" y="414" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 68 | font-size="15" fill="#9090A0">对角张力赋予页面动感与节奏</text> |
| 69 | |
| 70 | <!-- 左下角图像标注 --> |
| 71 | <rect x="48" y="608" width="230" height="60" rx="3" fill="#0F1117" fill-opacity="0.7"/> |
| 72 | <text x="66" y="633" font-family="Consolas, monospace" font-size="12" fill="#F5A623">IMAGE · LEFT-BOTTOM</text> |
| 73 | <text x="66" y="653" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="14" fill="#E8E8F0">奇幻动画森林场景</text> |
| 74 | |
| 75 | <!-- 页码 --> |
| 76 | <text x="1240" y="700" text-anchor="end" font-family="Arial, sans-serif" font-size="13" fill="#5A5A72">13</text> |
| 77 | </svg> |
| 78 |