36 lines
2.2 KiB
XML
36 lines
2.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1067" height="600" viewBox="0 0 1067 600">
|
|
<defs>
|
|
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#f4f2fb"/>
|
|
<stop offset="1" stop-color="#e9e5f6"/>
|
|
</linearGradient>
|
|
<linearGradient id="p" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#7c5cff"/>
|
|
<stop offset="1" stop-color="#fe8bbb"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="1067" height="600" fill="url(#bg)"/>
|
|
<!-- 瀑布流示意：5 列不同高度的块 -->
|
|
<g font-family="sans-serif" font-size="26" font-weight="700" fill="#5b5568">
|
|
<text x="533" y="86" text-anchor="middle" font-size="40" fill="#3b3550">react-photo-album · Masonry</text>
|
|
<text x="533" y="130" text-anchor="middle" font-size="24" fill="#8a84a0">生图图库瀑布流排版实战</text>
|
|
</g>
|
|
<g stroke="#ffffff" stroke-width="6">
|
|
<rect x="140" y="180" width="150" height="130" rx="14" fill="url(#p)"/>
|
|
<rect x="302" y="180" width="150" height="200" rx="14" fill="#7c5cff" opacity="0.75"/>
|
|
<rect x="464" y="180" width="150" height="95" rx="14" fill="#fe8bbb" opacity="0.85"/>
|
|
<rect x="626" y="180" width="150" height="170" rx="14" fill="#7c5cff" opacity="0.55"/>
|
|
<rect x="788" y="180" width="150" height="120" rx="14" fill="#b39cff"/>
|
|
<rect x="140" y="326" width="150" height="200" rx="14" fill="#fe8bbb" opacity="0.6"/>
|
|
<rect x="302" y="396" width="150" height="130" rx="14" fill="#7c5cff" opacity="0.85"/>
|
|
<rect x="464" y="291" width="150" height="235" rx="14" fill="url(#p)"/>
|
|
<rect x="626" y="366" width="150" height="160" rx="14" fill="#b39cff"/>
|
|
<rect x="788" y="316" width="150" height="210" rx="14" fill="#7c5cff" opacity="0.7"/>
|
|
<rect x="140" y="542" width="150" height="90" rx="14" fill="#7c5cff" opacity="0.5"/>
|
|
<rect x="302" y="542" width="150" height="150" rx="14" fill="#fe8bbb" opacity="0.8"/>
|
|
<rect x="464" y="542" width="150" height="110" rx="14" fill="#7c5cff" opacity="0.9"/>
|
|
<rect x="626" y="542" width="150" height="180" rx="14" fill="#b39cff" opacity="0.9"/>
|
|
<rect x="788" y="542" width="150" height="100" rx="14" fill="#7c5cff"/>
|
|
</g>
|
|
</svg>
|