（一）通过设置color、background-image及background-clip实现文字颜色渐变
<template>
<span class="title">文字实现渐变色的两种方案</span>
</template>
<style>
.title {
color: transparent;
background-image: linear-gradient(180deg, #ffffff 28.65%, #1efff4 100%);
background-clip: text;
}
</style>
注意：如果使用的是块级元素，记得加上background-color: transparent
效果如下：
（二）通过svg的linearGradient及text元素实现文字的颜色渐变
<template>
<!-- 默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野 -->
<!-- 通过viewBox来修改默认的显示配置，viewBox由4个点组成，viewBox=“x, y, w, h”；其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height” -->
<!-- 当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。 -->
<!-- 当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。。 -->
<svg width="500" height="150" viewBoxs="0 0 500 300" class="svg-box">
<defs>
<!-- 线性渐变可以被定义为水平、垂直或角度渐变 -->
<!-- x1, x2, y1,y2属性定义渐变的起始位置 -->
<!-- 当y1和y2相等，x1和x2不同时，创建水平渐变 -->
<!-- 当x1和x2相等，y1和y2不同时，创建垂直渐变 -->
<!-- 当y1和y2不同并且x1和x2也不同时，创建角度渐变（Angular gradients） -->
<linearGradient id="svg-linergradient" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
<!-- 渐变的颜色范围可以由2个或多个颜色组成。每一种颜色都通过一个<stop>标签来指定。 offset属性用来定义渐变颜色开始和结束的位置。 -->
<!-- 开始颜色 -->
<stop offset="0" style="stop-color:yellow"/>
<!-- 中间颜色 -->
<stop offset="0.5" style="stop-color:#fd8403"/>
<!-- 结束颜色 -->
<stop offset="1" style="stop-color:red"/>
</linearGradient>
</defs>
<!-- 默认<text>从起始位置(x,y)开始展示。但由于在svg中无法事先知道<text>的长度，所以无法仅通过改变(x,y)让<text>的中轴或结束位置位于指定位置。 -->
<!-- svg提供了一种更简单直接的方法实现这些对齐方式 -->
<!-- text-anchor属性可以改变(x,y)作为起始坐标的定义。 -->
<!-- text-anchor="start"时，(x,y)为<text>的起始坐标。 -->
<!-- text-anchor="middle"时，(x,y)为<text>的中轴坐标。 -->
<!-- text-anchor="end"时，(x,y)为<text>的结束坐标。 -->
<text text-anchor="start" class="gradient-text" x="0" y="30%">文字实现渐变色的两种方案</text>
</svg>
</template>
<style>
.gradient-text{
fill:url(#svg-linergradient);
font-size:40px;
font-weight:bolder;
}
</style>
效果如下：
