SVG绘制渐变颜色文字
H5提供了很多有意思的新特性，工作中用的比较少，但是这仍然不能阻碍我们对它的兴趣，先给大家上个图，如果要用CSS来写这个效果，如何才能实现呢？
怎么样？这个文字效果不好实现吧，以上这个效果其实是用H5的SVG绘图实现的，下面是代码实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG绘制渐变对象</title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h1>SVG绘制渐变对象</h1>
<svg id="s9" width="500" height="400">
<!--渐变对象属于一种特效对象-->
<defs>
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="0">
<stop offset="0%" stop-color="red"></stop>
<stop offset="17%" stop-color="orange"></stop>
<stop offset="34%" stop-color="yellow"></stop>
<stop offset="51%" stop-color="green"></stop>
<stop offset="68%" stop-color="cyan"></stop>
<stop offset="85%" stop-color="blue"></stop>
<stop offset="100%" stop-color="purple"></stop>
</linearGradient>
<!--<radialGradient id="g4">此标签为放射性渐变</radialGradient>-->
</defs>
<rect width="400" height="100" x="50" y="150" fill="url(#g3)"></rect>
<text font-size="60" x="100" y="300" fill="url(#g3)">一段文本</text>
</svg>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/06/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
