实现效果：
svgtext.jpg
代码：

  1. <svg viewBox="0 0 716 65">
  2.     <defs>
  3.         <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
  4.             <stop offset="0%" stop-color="#d8dadc" />
  5.             <stop offset="100%" stop-color="#99d0fa" />
  6.         </linearGradient>
  7.         <filter filterUnits="userSpaceOnUse" id="textShadow" x="0" y="0" width="716" height="65">
  8.             <feOffset in="SourceAlpha" dx="0" dy="5" />
  9.             <feGaussianBlur result="blurOut" stdDeviation="2.2" />
  10.             <feFlood flood-color="rgb(0, 0, 0)" result="floodOut" />
  11.             <feComposite operator="atop" in="floodOut" in2="blurOut" />
  12.             <feComponentTransfer>
  13.                 <feFuncA type="linear" slope="0.97" />
  14.             </feComponentTransfer>
  15.             <feMerge>
  16.                 <feMergeNode />
  17.                 <feMergeNode in="SourceGraphic" />
  18.             </feMerge>
  19.         </filter>
  20.         <pattern id="textPattern" width="716" height="65" patternUnits="userSpaceOnUse">
  21.             <rect x="0" y="0" width="100%" height="100%" fill="url(#textGradient)"></rect>
  22.         </pattern>
  23.     </defs>
  24.     <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="56" font-weight="400" fill="url(#textPattern)" style="filter: url(#textShadow)">
  25.         SVG 实现渐变文字
  26.     </text>
  27. </svg>

svg 文字

svgtext1.jpg

  1. <svg viewBox="0 0 716 65">
  2.     <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="56" font-weight="400">
  3.         SVG 实现渐变文字
  4.     </text>
  5. </svg>

text元素定义了一个由文字组成的图形。

x，y 坐标

x, y 表示文字 baseline 的起始位置。

alignment-baseline

表示该元素的基线如何相对于它的父元素对齐。默认为 auto, 其计算值为 baseline，即文字的 baseline 对齐到 y 坐标。

张鑫旭 - 我对CSS vertical-align的一些理解与认识（一）：

我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。 base_line.jpg

text-anchor

该文本与点 (x, y) 的对齐方式 (start、middle、end)。

文本居中

  1. <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="56" font-weight="400">
  2.   SVG 实现渐变文字
  3. </text>

或者：

  1. <text x="50%" y="0" alignment-baseline="before-edge" text-anchor="middle" font-size="56" font-weight="400">
  2.   SVG 实现渐变文字
  3. </text>

或者：

  1. <text x="50%" y="100%" alignment-baseline="after-edge" text-anchor="middle" font-size="56" font-weight="400">
  2.   SVG 实现渐变文字
  3. </text>

渐变文字

linearGradient

线性渐变。x1、y1、x2、y2 表示起始点 (x1, y1) 和终点坐标 (x2, y2)； 表示渐变色位置和颜色。
svgtext3.jpg

  1. <svg viewBox="0 0 716 65">
  2.     <defs>
  3.         <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
  4.             <stop offset="0%" stop-color="#d8dadc" />
  5.             <stop offset="100%" stop-color="#99d0fa" />
  6.         </linearGradient>
  7.         <pattern id="textPattern" width="716" height="65" patternUnits="userSpaceOnUse">
  8.             <rect x="0" y="0" width="100%" height="100%" fill="url(#textGradient)"></rect>
  9.         </pattern>
  10.     </defs>
  11.     <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="56" font-weight="400" fill="url(#textPattern)" style="filter: url(#textShadow)">
  12.         SVG 实现渐变文字
  13.     </text>
  14. </svg>

文字阴影效果

svgtext4.jpg

  1. <svg viewBox="0 0 716 65">
  2.     <defs>
  3.         <filter filterUnits="userSpaceOnUse" id="textShadow" x="0" y="0" width="716" height="65">
  4.             <feOffset in="SourceAlpha" dx="0" dy="5" />
  5.             <feGaussianBlur result="blurOut" stdDeviation="2.2" />
  6.             <feFlood flood-color="rgb(0, 0, 0)" result="floodOut" />
  7.             <feComposite operator="atop" in="floodOut" in2="blurOut" />
  8.             <feComponentTransfer>
  9.                 <feFuncA type="linear" slope="0.97" />
  10.             </feComponentTransfer>
  11.             <feMerge>
  12.                 <feMergeNode />
  13.                 <feMergeNode in="SourceGraphic" />
  14.             </feMerge>
  15.         </filter>
  16.     </defs>
  17.     <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="56" font-weight="400" style="filter: url(#textShadow)">
  18.       SVG 实现渐变文字
  19.     </text>
  20. </svg>

用于定义 svg 滤镜。

feOffset

滤镜位移。

feGaussianBlur 高斯模糊

feFlood 着色

feComposite 组合

feComponentTransfer RGBA 颜色通道滤镜

<feComponentTransfer> SVG滤镜基元对每个像素执行颜色分量的数据重映射。它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作。 计算是使用非预乘色值进行执行的。(什么是非预乘数据：非预乘数据可以理解为例如rgba(180,160,130,0.8) )中的 180,160,130，它们没有被除以 255 以及乘以透明度 0.8 而转化为 0~1 范围的值，当被除以 255 并且乘以 0.8 而转化为 0~1 范围中的值的预处理被称为 premultiplied color value (预乘数据) )。颜色值在每一个通道 (R,G,B,A) 中被分别修改然后输出，这些通道分别是 <feFuncR>, <feFuncB>, <feFuncG>, and <feFuncA>。

feMerge

同时应用滤镜效果而不是按顺序应用滤镜效果