https://stackoverflow.com/questions/52356677/issue-with-linear-gradient-on-svg-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg实现文本颜色渐变</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
background-color: black;
background-size: 100% 100%;
overflow: hidden;
}
/*svg容器*/
svg {
height: 100%;
width: 100%;
overflow: hidden;
}
polygon {
fill: transparent;
stroke-width: 1;
stroke: steelblue;
}
.sfp2 {
font-size: 25px;
fill:url(#MyGradient);
}
</style>
<!--原文链接:https://stackoverflow.com/questions/52356677/issue-with-linear-gradient-on-svg-text-->
</head>
<body>
<div style="width:17%;height:6%;margin-left: 100px;margin-top: 100px;border: red solid 1px;">
<svg viewBox="0 0 257 40" preserveaspectratio='none'>
<defs>
<linearGradient id="MyGradient">
<!--
0到40%是#1086D9
40%到70%是#1EAED2
70%到100%是#1086D9
-->
<stop offset="0%" stop-color="#1086D9"/>
<stop offset="40%" stop-color="#1EAED2"/>
<stop offset="70%" stop-color="#1EAED2"/>
<stop offset="100%" stop-color="#1086D9"/>
</linearGradient>
</defs>
<!--x和y,是文本距离svg容器左边的距离和上边的距离。距离左边的距离可以设置为0,但距离上边的距离不能设置为0,因为文本的字体大小是占有高度的,
所以距离上边的距离应该大于文本font-size的值 -->
<text x="1" y="26" class="sfp2">svg实现文本颜色渐变</text>
<!--这里绘制多边形,是为了确定容器的宽高,从而更精确的设置viewBox的值。viewBox可以保证当div容器宽高发生变化时,svg容器中的内容也会随之变化-->
<polygon points='1,1 1,39 256,39 256,1' />
</svg>
</div>
</body>
</html>