<svg xmlns="http://www.w3.org/2000/svg" width="600" height="800">
<!-- 渐变背景 -->
<defs>
<linearGradient id="beefGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8B4513;stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:#D2691E;stop-opacity:0.8"/>
</linearGradient>
</defs>
<!-- 背景 -->
<rect width="600" height="800" fill="url(#beefGradient)"/>
<!-- 主标题 -->
<text x="300" y="150"
text-anchor="middle"
font-size="40"
font-weight="bold"
fill="white">
🔥惊艳味蕾！
</text>
<text x="300" y="200"
text-anchor="middle"
font-size="30"
fill="white">
饭小九牛腩饭绝了💯
</text>
<!-- 食物图标 -->
<text x="300" y="300"
text-anchor="middle"
font-size="120">
🥩
</text>
<!-- 核心要点 -->
<g fill="white" font-size="20">
<text x="100" y="450">• 精选上等牛肉</text>
<text x="100" y="500">• 慢火炖煮8小时</text>
<text x="100" y="550">• 独家秘制酱料</text>
<text x="100" y="600">• 现点现做，新鲜热乎</text>
</g>
<!-- 标签 -->
<g fill="white" font-size="18">
<text x="100" y="700">#美食推荐</text>
<text x="250" y="700">#牛腩控</text>
<text x="400" y="700">#值得打卡</text>
</g>
</svg>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
/* 示例代码 */
body {
text-align: center;
}
i {
color: #777;
}
// 示例代码
console.log("Hello 笔.COOL 控制台")