| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="frostBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 4 | <stop offset="0%" stop-color="#F0F4FA"/> |
| 5 | <stop offset="100%" stop-color="#E4EEF8"/> |
| 6 | </linearGradient> |
| 7 | <linearGradient id="textToImg" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 8 | <stop offset="0%" stop-color="#F0F4FA" stop-opacity="1"/> |
| 9 | <stop offset="60%" stop-color="#F0F4FA" stop-opacity="1"/> |
| 10 | <stop offset="100%" stop-color="#F0F4FA" stop-opacity="0"/> |
| 11 | </linearGradient> |
| 12 | <linearGradient id="accentPrimary" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 13 | <stop offset="0%" stop-color="#7C6FF7"/> |
| 14 | <stop offset="100%" stop-color="#4ECDC4"/> |
| 15 | </linearGradient> |
| 16 | <clipPath id="rightImgClip"> |
| 17 | <rect x="440" y="0" width="840" height="720"/> |
| 18 | </clipPath> |
| 19 | </defs> |
| 20 | |
| 21 | <!-- Background — frost-ice: near-white field --> |
| 22 | <rect width="1280" height="720" fill="url(#frostBg)"/> |
| 23 | |
| 24 | <!-- Right image — vector-illustration, bleeds to right edge --> |
| 25 | <image href="../images/p04_right_img.png" x="440" y="0" width="840" height="720" |
| 26 | clip-path="url(#rightImgClip)" preserveAspectRatio="xMidYMid slice"/> |
| 27 | |
| 28 | <!-- Left-to-right fade overlay so text area stays clean --> |
| 29 | <rect x="0" y="0" width="680" height="720" fill="url(#textToImg)"/> |
| 30 | |
| 31 | <!-- Top accent rule --> |
| 32 | <rect x="60" y="50" width="360" height="3" rx="1.5" fill="url(#accentPrimary)"/> |
| 33 | |
| 34 | <!-- Badge --> |
| 35 | <rect x="60" y="64" width="240" height="26" rx="4" fill="#7C6FF7" fill-opacity="0.1"/> |
| 36 | <text x="70" y="81" font-family="Arial, sans-serif" font-size="13" fill="#7C6FF7">vector-illustration × frost-ice</text> |
| 37 | |
| 38 | <!-- Page number --> |
| 39 | <text x="60" y="120" font-family="Consolas, monospace" font-size="13" fill="#9090A0">P04</text> |
| 40 | |
| 41 | <!-- Main title — dark text on light bg --> |
| 42 | <text x="60" y="170" font-family="Georgia, 'Microsoft YaHei', serif" |
| 43 | font-size="48" font-weight="bold" fill="#1A1A3A">右图出血</text> |
| 44 | <text x="60" y="210" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 45 | font-size="18" fill="#5A5A72">Right Image Bleed</text> |
| 46 | |
| 47 | <!-- Body text --> |
| 48 | <text x="60" y="270" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 49 | font-size="20" fill="#2A2A4A">矢量插画图像占右侧大面积，</text> |
| 50 | <text x="60" y="298" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 51 | font-size="20" fill="#2A2A4A">并从右边缘出血至画布外。</text> |
| 52 | <text x="60" y="346" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 53 | font-size="20" fill="#6A6A8A">文字在左侧浮动，大图小字</text> |
| 54 | <text x="60" y="374" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 55 | font-size="20" fill="#6A6A8A">形成强烈的视觉张力。</text> |
| 56 | |
| 57 | <!-- Feature dots --> |
| 58 | <rect x="60" y="422" width="4" height="4" rx="2" fill="#7C6FF7"/> |
| 59 | <text x="76" y="432" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#2A2A4A">扁平矢量风格，几何感强</text> |
| 60 | |
| 61 | <rect x="60" y="460" width="4" height="4" rx="2" fill="#4ECDC4"/> |
| 62 | <text x="76" y="470" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#2A2A4A">冰霜白底色，清爽专业</text> |
| 63 | |
| 64 | <rect x="60" y="498" width="4" height="4" rx="2" fill="#F5A623"/> |
| 65 | <text x="76" y="508" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="18" fill="#2A2A4A">右边缘出血，无边框感极强</text> |
| 66 | |
| 67 | <!-- Info box --> |
| 68 | <rect x="60" y="558" width="340" height="96" rx="8" fill="#FFFFFF" fill-opacity="0.8" |
| 69 | stroke="#7C6FF7" stroke-opacity="0.2" stroke-width="1"/> |
| 70 | <text x="80" y="585" font-family="Consolas, monospace" font-size="13" fill="#6A6A8A">Rendering</text> |
| 71 | <text x="180" y="585" font-family="Consolas, monospace" font-size="13" fill="#1A1A3A">vector-illustration</text> |
| 72 | <text x="80" y="608" font-family="Consolas, monospace" font-size="13" fill="#6A6A8A">Palette </text> |
| 73 | <text x="180" y="608" font-family="Consolas, monospace" font-size="13" fill="#1A1A3A">frost-ice</text> |
| 74 | <text x="80" y="631" font-family="Consolas, monospace" font-size="13" fill="#6A6A8A">Layout </text> |
| 75 | <text x="180" y="631" font-family="Consolas, monospace" font-size="13" fill="#1A1A3A">right bleed image + left text</text> |
| 76 | |
| 77 | <!-- Page number corner --> |
| 78 | <text x="1240" y="700" text-anchor="end" font-family="Arial, sans-serif" font-size="13" fill="#9090A0">04</text> |
| 79 | </svg> |
| 80 |