css 渐变文字

因为最近的项目需要兼容ie浏览器，所以也遇到了渐变文字的问题，在此记录一下。

渐变：是在两个到多个颜色之间平稳过渡

background: linear-gradient(direction, color-stop1, color-stop2, ...);
//direction也可以是角度： 比如 90deg
#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

文字渐变

实现思路有两个

• 使用background-clip: text
• 使用 svg

background-clip

规定背景的绘制区域

background-clip: border-box|padding-box|content-box|text;

.container {
    width: 100%;
    border: 1px solid #ccc;
    margin: 0 auto;
    background: linear-gradient(90deg, #f29914 15%, #0bbbe3 76%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

<div class="container">
  <p class="text">css 渐变文字(1) 之 background-clip</p>
</div>

效果如图：

但是 ie 是不支持background-clip: text;无奈只好寻找新出路解决

svg渐变

svg中的渐变不仅可以填充图形，也可以用来填充文本

线性渐变：linearGradient
放射性渐变： radialGradient

线性渐变可被定义为水平渐变，垂直渐变和角形渐变

水平渐变：y1 和 y2 相等，x1 和 x2 不同
垂直渐变：x1 和 x2 相等，y1 和 y2 不同
角形渐变：x1 和 x2 不同，且 y1 和 y2 不同

例如：

<svg>
    <defs>
      <linearGradient id={props.id} gradientUnits="userSpaceOnUse">
        <stop
          offset={props.start}
          style={{ stopColor: props.startColor }}
        />
        <stop offset={props.end} style={{ stopColor: props.endColor }} />
      </linearGradient>
    </defs>
    <text text-anchor="middle" fill={props.fillUrl} x="50%" y="100%">
       {`${ props.data }%`}
    </text>
</svg>

这样就可以兼容 ie 啦