css3文字渐变, svg文字渐变

1.svg 文字渐变

      <!-- 横向渐变（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="36" fill="url(#grad_red_blue_lr)" style="font-size:36px">
          渐变文字{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="36" fill="url(#grad_red_blue_tb)" style="font-size:36px">
          渐变文字{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="36" fill="url(#grad_red_yellow_lr)" style="font-size:36px">
          渐变文字{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="36" fill="url(#grad_red_yellow_tb)" style="font-size:36px">
          渐变文字{gradientTransform: "rotate(90)"}
        </text>
      </svg>