js实现文字颜色渐变（兼容IE）

最新推荐文章于 2024-05-06 17:56:37 发布

不吃西红柿w

最新推荐文章于 2024-05-06 17:56:37 发布

阅读量2.1k

点赞数

分类专栏： js小技巧文章标签： javascript 前端 svg react

本文链接：https://blog.youkuaiyun.com/qq_32445707/article/details/123075921

版权

js小技巧专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用SVG和JavaScript在React组件中创建文字颜色渐变，同时确保在IE浏览器中的良好兼容性。通过计算文字长度动态调整SVG宽度，实现美观的文本展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用svg来实现文字颜色渐变效果，并且可以很好地兼容IE。

一、封装一个组件，接收文字

import React from "react";

function TextColor(props){
    //计算名字的字节数，用于计算svg宽度
    const computeLength = (str) => {
        var bytesCount = 0;
        for (var i = 0; i < str.length; i++){
            var c = str.charAt(i);
            if (/^[\u0000-\u00ff]$/.test(c)){//匹配双字节
                bytesCount += 1;
            } else {
                bytesCount += 2;
            }
        }
        return bytesCount;
    }
    var name = props.text;
    return (
    <svg width={computeLength(name)*8.5} height="22" className="name_color">
        <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style={{stopColor: "red", stopOpacity:1}} />
            <stop offset="100%" style={{stopColor: "blue", stopOpacity:0.6}} />
        </linearGradient>
        </defs>
        <text x="0" y="16" fill="url(#grad)" style={{fontSize:"16px",fontWight: "bold"}}>
            {name}
        </text>
    </svg>
    )
}

export default TextColor;

这个地方注意需要计算文字的显示长度，来给svg宽度赋值（避免出现文字与并列的其他内容间隔太大影响显示效果）。

svg相关属性使用方法：

linearGradient的x1，y1表示颜色渲染起始坐标，x2，y2表示颜色渲染结束坐标。

stop表示颜色节点，offset表示该颜色渲染顺序，stopColor是渲染的颜色，stopOpacity表示颜色透明度。

二、引入组件

import TextColor from "../component/textColor";

function App(props) {
  return (
    <div style={{marginTop: "100px", textAlign: "center"}}>
      <TextColor text="我是随机取的名字111111" />
      <p>我是其他内容</p>
    </div>
    
  )
}