文字渐变写法

常用的文字渐变会用CSS3的方式
即：使用linear-gradient设置背景色会渐变色，然后设置-webkit-background-clip为text，然后color设置透明即可。
如：

 h3{
   display: inline-block;
   font-family:'PingFangSC-Regular','PingFang SC';
   font-size: 32px;
   font-weight: 400;
   background-image: linear-gradient(270deg,#8929D7 0%,#1BFBEB 100%);
   -webkit-background-clip:text;
   color: transparent;
 }

但目前由于只有webkit核心的浏览器支持，因此导致兼容性不够好，可能会出现问题，因此在查找资料后，发现使用svg标签来做，有同样的效果。
代码如下：

<svg style="width:150px;height:50px;">
  <defs>
    <linearGradient id="grad" x1="100%" y1="50%" x2="0%" y2="50%">
      <stop offset="0%" style="stop-color:#8929D7; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#1BFBEB; stop-opacity:1" />
    </linearGradient>
  </defs>
  <text x="0" y="36" fill="url(#grad)" style="font-size:36px;">需要渲染文字</text>
</svg>

在这里需要注意的是，如果是动态渲染，当文字长度不一的情况下，svg最好设置一个合适的宽高，否则则会渲染默认的宽高，位置调整起来可能会比较麻烦，具体的位置调整还是需要看业务需求。

svg渲染可兼容较低版本的IE浏览器，其余常用浏览器兼容性也非常好，因此在需要高兼容的情况下，建议使用这种方式去渲染渐变色文字，但如果只兼容webkit核心的浏览器，那么可以仍然使用CSS3的方式，更为简单直接