内容纲要
湛蓝如海，涌动无边，
曲线层叠，似浪若涟。
柔美如丝，轻舞指尖，
在无声中，自由蔓延。
是谁勾勒这无形的线？
涟漪迭起，不问深浅。
蓝色的梦，静谧中旋，
如水般清澈，似风般幻。
一抹蓝，化作永恒的诗篇，
在虚无之中，流转人间。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Card with Download</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Lora:ital@1&display=swap" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<!-- SVG卡片 -->
<svg id="svgCard" width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- 背景渐变 -->
<defs>
<linearGradient id="bgGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#dbeeff" />
<stop offset="100%" stop-color="#b0d4f1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="400" height="300" fill="url(#bgGradient)" rx="20" />
<!-- 蓝色涟漪形状 -->
<path d="M100,120 Q130,90 160,120 T220,120 Q250,150 280,120 T340,120" fill="none" stroke="#5b9bd5" stroke-width="3" />
<path d="M120,160 Q150,130 180,160 T240,160 Q270,190 300,160 T360,160" fill="none" stroke="#4378a0" stroke-width="3" />
<!-- 圆形装饰 -->
<circle cx="100" cy="100" r="8" fill="#5b9bd5" />
<circle cx="140" cy="140" r="6" fill="#4378a0" />
<circle cx="300" cy="90" r="10" fill="#5b9bd5" />
<circle cx="350" cy="150" r="6" fill="#4378a0" />
<!-- 卡片内容标题和诗句 -->
<text x="50%" y="35%" text-anchor="middle" font-family="'Dancing Script', cursive" font-size="28" fill="#2c3e50" letter-spacing="2px">
蓝之涟漪
</text>
<text x="50%" y="48%" text-anchor="middle" font-family="'Lora', serif" font-size="14" fill="#2c3e50" letter-spacing="1px">
湛蓝如海，涌动无边
</text>
<text x="50%" y="55%" text-anchor="middle" font-family="'Lora', serif" font-size="14" fill="#2c3e50" letter-spacing="1px">
曲线层叠，似浪若涟
</text>
<text x="50%" y="62%" text-anchor="middle" font-family="'Lora', serif" font-size="14" fill="#2c3e50" letter-spacing="1px">
柔美如丝，轻舞指尖
</text>
<text x="50%" y="69%" text-anchor="middle" font-family="'Lora', serif" font-size="14" fill="#2c3e50" letter-spacing="1px">
在无声中，自由蔓延
</text>
</svg>
<!-- 下载按钮 -->
<button onclick="downloadSVG()" style="margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer;">
下载图片
</button>
<!-- 下载功能脚本 -->
<script>
function downloadSVG() {
const svgElement = document.getElementById("svgCard");
const serializer = new XMLSerializer();
const svgBlob = new Blob([serializer.serializeToString(svgElement)], { type: "image/svg+xml" });
const url = URL.createObjectURL(svgBlob);
const downloadLink = document.createElement("a");
downloadLink.href = url;
downloadLink.download = "蓝之涟漪.svg";
downloadLink.click();
URL.revokeObjectURL(url); // 释放内存
}
</script>
</body>
</html>