SOURCE

      <!-- 横向渐变（x1,y1,x2,y2控制渐变方向） -->
      <svg>
        <defs>
            <linearGradient id="grad_red_blue_lr" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:blue; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="32" fill="url(#grad_red_blue_lr)" style="font-size:32px">
          渐变文字{x1: "0%",y1: "0%", x2: "100%", y2: "0%"}
        </text>
      </svg>

      <!-- 纵向渐变（x1,y1,x2,y2控制渐变方向） -->
      <svg>
        <defs>
            <linearGradient id="grad_red_blue_tb" x1="0%" y1="100%" x2="0%" y2="0%">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:blue; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="32" fill="url(#grad_red_blue_tb)" style="font-size:32px">
          渐变文字{x1: "0%",y1: "100%", x2: "0%", y2: "0%"}
        </text>
      </svg>

      <!-- 横向渐变（gradientTransform: rotate） -->
      <svg>
        <defs>
            <linearGradient id="grad_red_yellow_lr" gradientTransform="rotate(0)">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:yellow; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="32" fill="url(#grad_red_yellow_lr)" style="font-size:32px">
          渐变文字{gradientTransform: "rotate(0)"}
        </text>
      </svg>

      <!-- 纵向渐变（gradientTransform: rotate）-->
      <svg>
        <defs>
            <linearGradient id="grad_red_yellow_tb" gradientTransform="rotate(90)">
              <stop offset="0%" style="stop-color:red; stop-opacity:1" />
              <stop offset="100%" style="stop-color:yellow; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="32" fill="url(#grad_red_yellow_tb)" style="font-size:32px">
          渐变文字{gradientTransform: "rotate(90)"}
        </text>
      </svg>

svg {
    height: 42px;
    width: 100%;
}

text {
    text-anchor: start;
    /* text-anchor: middle; */ /*居中 x50%*/
    /* text-anchor: end; */
}