| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <clipPath id="p09ImgT"><rect x="60" y="240" width="540" height="280" rx="6"/></clipPath> |
| 4 | <clipPath id="p09ImgB"><rect x="60" y="540" width="540" height="148" rx="6"/></clipPath> |
| 5 | <linearGradient id="p09TopT" x1="0" y1="0" x2="0" y2="1"> |
| 6 | <stop offset="0%" stop-color="#5A6B7A" stop-opacity="0.55"/> |
| 7 | <stop offset="40%" stop-color="#5A6B7A" stop-opacity="0"/> |
| 8 | </linearGradient> |
| 9 | <linearGradient id="p09TopB" x1="0" y1="0" x2="0" y2="1"> |
| 10 | <stop offset="0%" stop-color="#6B7A4F" stop-opacity="0.55"/> |
| 11 | <stop offset="55%" stop-color="#6B7A4F" stop-opacity="0"/> |
| 12 | </linearGradient> |
| 13 | <linearGradient id="p09BottomFadeT" x1="0" y1="0" x2="0" y2="1"> |
| 14 | <stop offset="0%" stop-color="#F5F2EC" stop-opacity="0"/> |
| 15 | <stop offset="100%" stop-color="#F5F2EC" stop-opacity="0.95"/> |
| 16 | </linearGradient> |
| 17 | </defs> |
| 18 | |
| 19 | <g id="bg"> |
| 20 | <rect width="1280" height="720" fill="#F5F2EC"/> |
| 21 | </g> |
| 22 | |
| 23 | <g id="header"> |
| 24 | <rect x="60" y="60" width="3" height="32" fill="#6B7A4F"/> |
| 25 | <text x="76" y="84" font-family="Georgia, serif" font-size="13" font-weight="700" fill="#5A6B7A" letter-spacing="3">III · 巡览 · CASE 01</text> |
| 26 | <text x="1220" y="84" text-anchor="end" font-family="Georgia, serif" font-size="13" fill="#5A6B7A">SHENZHEN · MVRDV · 1994 → NOW</text> |
| 27 | </g> |
| 28 | |
| 29 | <g id="page-title"> |
| 30 | <text x="60" y="148" font-family="KaiTi, Georgia, serif" font-size="36" font-weight="700" fill="#2B3A4A">给老建筑穿一件<tspan fill="#6B7A4F">"彩色网格外衣"</tspan></text> |
| 31 | <line x1="60" y1="172" x2="160" y2="172" stroke="#6B7A4F" stroke-width="2"/> |
| 32 | <text x="60" y="200" font-family=""Microsoft YaHei", sans-serif" font-size="16" fill="#5A6B7A">深圳妇儿大厦 · "适应性再利用"模式在城市更新领域的典范之作</text> |
| 33 | </g> |
| 34 | |
| 35 | <g id="img-before"> |
| 36 | <image href="../images/640_9.png" x="60" y="240" width="540" height="280" preserveAspectRatio="xMidYMid slice" clip-path="url(#p09ImgT)"/> |
| 37 | <rect x="60" y="240" width="540" height="100" fill="url(#p09TopT)"/> |
| 38 | <rect x="60" y="450" width="540" height="70" fill="url(#p09BottomFadeT)"/> |
| 39 | <g id="badge-bf-09"> |
| 40 | <rect x="80" y="260" width="12" height="12" fill="#F5F2EC"/> |
| 41 | <text x="100" y="271" font-family="Georgia, serif" font-size="12" font-weight="700" fill="#F5F2EC" letter-spacing="3">BEFORE · 1994</text> |
| 42 | </g> |
| 43 | </g> |
| 44 | |
| 45 | <g id="img-after"> |
| 46 | <image href="../images/640_10.png" x="60" y="540" width="540" height="148" preserveAspectRatio="xMidYMid slice" clip-path="url(#p09ImgB)"/> |
| 47 | <rect x="60" y="540" width="540" height="60" fill="url(#p09TopB)"/> |
| 48 | <g id="badge-af-09"> |
| 49 | <rect x="80" y="558" width="12" height="12" fill="#6B7A4F"/> |
| 50 | <text x="100" y="569" font-family="Georgia, serif" font-size="12" font-weight="700" fill="#F5F2EC" letter-spacing="3">AFTER</text> |
| 51 | </g> |
| 52 | <text x="600" y="710" text-anchor="end" font-family=""Microsoft YaHei", sans-serif" font-size="11" fill="#8A8275">改造后立面 · 摄影：夏至</text> |
| 53 | </g> |
| 54 | |
| 55 | <g id="features"> |
| 56 | <rect x="660" y="240" width="560" height="190" rx="6" fill="#EBE6DC"/> |
| 57 | <use data-icon="tabler-outline/grid-dots" x="684" y="262" width="28" height="28" fill="#6B7A4F"/> |
| 58 | <text x="724" y="284" font-family=""Microsoft YaHei", sans-serif" font-size="18" font-weight="700" fill="#2B3A4A">彩色网格框架</text> |
| 59 | <text x="684" y="324" font-family=""Microsoft YaHei", sans-serif" font-size="15" fill="#5A6B7A">立面增加 <tspan fill="#6B7A4F" font-weight="700">近 1 米</tspan> 进深，起到遮阳作用</text> |
| 60 | <text x="684" y="350" font-family=""Microsoft YaHei", sans-serif" font-size="15" fill="#5A6B7A">内侧设可打开面板，<tspan fill="#6B7A4F" font-weight="700">促进自然通风</tspan></text> |
| 61 | <text x="684" y="376" font-family=""Microsoft YaHei", sans-serif" font-size="15" fill="#5A6B7A">显著降低对空调的依赖</text> |
| 62 | <line x1="684" y1="394" x2="744" y2="394" stroke="#6B7A4F" stroke-width="2"/> |
| 63 | <text x="684" y="416" font-family="KaiTi, Georgia, serif" font-size="13" font-style="italic" fill="#8B7355">— "适应性再利用"模式典范</text> |
| 64 | </g> |
| 65 | |
| 66 | <g id="programs"> |
| 67 | <rect x="660" y="450" width="560" height="240" rx="6" fill="#FFFFFF" stroke="#D6CFC0" stroke-width="1"/> |
| 68 | <text x="684" y="488" font-family=""Microsoft YaHei", sans-serif" font-size="13" font-weight="700" fill="#6B7A4F" letter-spacing="2">业态再造 · 五大功能</text> |
| 69 | <g id="prog-grid" transform="translate(684, 510)"> |
| 70 | <rect x="0" y="0" width="160" height="38" rx="6" fill="#F5F2EC"/> |
| 71 | <text x="80" y="24" text-anchor="middle" font-family=""Microsoft YaHei", sans-serif" font-size="14" fill="#2B3A4A">酒店 · 餐饮</text> |
| 72 | <rect x="180" y="0" width="160" height="38" rx="6" fill="#F5F2EC"/> |
| 73 | <text x="260" y="24" text-anchor="middle" font-family=""Microsoft YaHei", sans-serif" font-size="14" fill="#2B3A4A">儿童探索馆</text> |
| 74 | <rect x="360" y="0" width="160" height="38" rx="6" fill="#F5F2EC"/> |
| 75 | <text x="440" y="24" text-anchor="middle" font-family=""Microsoft YaHei", sans-serif" font-size="14" fill="#2B3A4A">图画书博物馆</text> |
| 76 | <rect x="0" y="56" width="240" height="38" rx="6" fill="#F5F2EC"/> |
| 77 | <text x="120" y="80" text-anchor="middle" font-family=""Microsoft YaHei", sans-serif" font-size="14" fill="#2B3A4A">婴幼儿托育馆</text> |
| 78 | <rect x="260" y="56" width="260" height="38" rx="6" fill="#F5F2EC"/> |
| 79 | <text x="390" y="80" text-anchor="middle" font-family=""Microsoft YaHei", sans-serif" font-size="14" fill="#2B3A4A">妇儿剧场 · 公共活动</text> |
| 80 | </g> |
| 81 | <text x="684" y="666" font-family="KaiTi, Georgia, serif" font-size="14" font-style="italic" fill="#5A6B7A">从单一办公塔楼，转型为充满活力的"垂直社区"</text> |
| 82 | </g> |
| 83 | </svg> |
| 84 |