使用SVG实现线性渐变空心文字效果【CSS基础入门100例】
关注IT技术视界公众号，获取好玩有趣软件！
先领1T空间！再存有趣资源！仅有一次机会！
在网页设计中，SVG（可缩放矢量图形） 提供了强大的图形绘制能力，允许我们创造出各种动态和精美的效果。今天，我们将介绍如何使用 SVG 和 线性渐变 实现一个空心渐变文字效果，使得文字边缘拥有渐变色，而文字内部则是透明的。
🎨 效果展示
下方展示了使用 SVG 创建的 空心渐变文字，文字从红色渐变到绿色再到蓝色，效果非常炫酷。
📌 完整代码
你可以复制下面的代码并粘贴到你的 HTML 文件中，直接查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用SVG实现线性渐变空心文字效果</title>
<style>
text {
font-family: SimHei; /* 定义字体 */
font-size: 56px; /* 定义文字大小 */
font-weight: bolder; /* 定义字体粗细 */
}
</style>
</head>
<body>
<svg width="600" height="300">
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF0000"></stop>
<stop offset="50%" stop-color="#00FF00"></stop>
<stop offset="100%" stop-color="#0000FF"></stop>
</linearGradient>
</defs>
<text x="30" y="150" fill="transparent" stroke="url(#linear)">失败是成功之母</text>
</svg>
</body>
</html>📖 代码解析
| 属性 | 描述 |
|---|---|
<linearGradient> |
定义了一个线性渐变，从红色到绿色再到蓝色。 |
x1="0%" y1="0%" x2="100%" y2="0%" |
设置渐变的方向，从左到右。 |
stop-color |
定义了渐变中的颜色。 |
fill="transparent" |
使文字内部为空心，即不填充颜色。 |
stroke="url(#linear)" |
为文字的轮廓设置渐变颜色，应用定义的线性渐变效果。 |
📌 代码解析
-
<defs>标签- 用于定义渐变效果等可重用的资源。这里使用
linearGradient标签定义了线性渐变效果。
- 用于定义渐变效果等可重用的资源。这里使用
-
linearGradient元素id="linear"使得这个渐变可以在文本中引用。x1="0%" y1="0%" x2="100%" y2="0%"设置了渐变的方向，从左到右。stop元素定义了渐变的具体颜色，offset属性指定颜色的渐变位置。
-
<text>元素fill="transparent"使得文字内部为空心，透明。stroke="url(#linear)"使用定义的linearGradient渐变作为文字的边框颜色，应用渐变效果。
🚀 结语
通过 SVG 和 线性渐变，我们可以创建出炫酷的 渐变空心文字 效果，不仅能提升页面的视觉吸引力，还能为文字加入更丰富的色彩。此效果适用于 标题设计、海报制作、品牌标语 等网页设计中，增强页面的动感和现代感！🎉✨
THE END