如何在getwaves.io导入的SVG标签中添加可显示的文本？

SVG是基于XML的矢量图形格式，不能直接在SVG标签内使用HTML的<div>标签，必须使用SVG原生的<text>元素来添加文本内容。以下是修改后的代码：

import React from "react";
import "../styles/About.css";

const About = () => {
  return (
    <div className=" ">
      <div className="row dip1">
        <h3>We serve in following technologies</h3>
        <p>Reactjs</p>
        <p>Wordpress</p>
        <p>PHP</p>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path
            fill="#FFFFFF"
            fill-opacity="1"
            d="M0,160L48,149.3C96,139,192,117,288,122.7C384,128,480,160,576,186.7C672,213,768,235,864,202.7C960,171,1056,85,1152,53.3C1248,21,1344,43,1392,53.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          ></path>
          {/* SVG原生文本元素 */}
          <text 
            x="720" 
            y="160" 
            text-anchor="middle" 
            fill="#333" 
            fontSize="24"
            fontWeight="bold"
          >
            这里是你要显示的文本
          </text>
        </svg>
      </div>
    </div>
  );
};

export default About;

关键说明： #

• <text>是SVG的原生文本元素，必须放在SVG标签内部
• x和y属性控制文本的位置（示例中设置为SVG中心位置）
• text-anchor="middle"让文本在x坐标处居中对齐
• fill属性设置文本颜色，fontSize、fontWeight控制文本样式
• 如果需要多行文本，可以使用<tspan>标签嵌套在<text>内部，或者添加多个<text>元素

内容的提问来源于stack exchange，提问作者Paras Chouhan