在React中将SVG作为背景图片：Data URI的正确应用

import styled from 'styled-components';

// 假设这是通过在线工具转换得到的Data URI字符串
const svgDataURI = `data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%3E%3Cpath%20fill%3D%22%23EEEEEE%22%20fill-opacity%3D%221%22%20d%3D%22M0%2C192L48%2C165.3C96%2C139%2C192%2C85%2C288%2C69.3C384%2C53%2C480%2C75%2C576%2C90.7C672%2C107%2C768%2C117%2C864%2C128C960%2C139%2C1056%2C149%2C1152%2C128C1248%2C107%2C1344%2C53%2C1392%2C26.7L1440%2C0L1440%2C320L1392%2C320C1344%2C320%2C1248%2C320%2C1152%2C320C1056%2C320%2C960%2C320%2C864%2C320C768%2C320%2C672%2C320%2C576%2C320C480%2C320%2C384%2C320%2C288%2C320C192%2C320%2C96%2C320%2C48%2C320L0%2C320Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E`;

const Container = styled.div`
  background-image: url(${svgDataURI});
  /* 其他背景样式，例如： */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 320px; /* 根据SVG的viewBox或实际需求设置高度 */
`;

function MyComponent() {
  return <Container />;
}

export default MyComponent;

/**
 * 将SVG字符串转换为Data URI格式。
 * @param {string} svgString - 原始SVG字符串。
 * @returns {string} - Data URI字符串。
 */
const svgToDataURI = (svgString) => {
  // 对SVG字符串中的特殊字符进行URL编码
  // 这种手动替换比encodeURIComponent更精细，因为它只编码CSS URL中需要转义的字符
  const encodedSvg = svgString
    .replace(/#/g, '%23') // 井号
    .replace(/{/g, '%7B') // 左花括号
    .replace(/}/g, '%7D') // 右花括号
    .replace(/</g, '%3C') // 小于号
    .replace(/>/g, '%3E') // 大于号
    .replace(/\(/g, '%28') // 左圆括号
    .replace(/\)/g, '%29') // 右圆括号
    .replace(/&/g, '%26') // 和号
    .replace(/'/g, '%27') // 单引号
    .replace(/"/g, '%22'); // 双引号

  // 返回Data URI字符串
  return `data:image/svg+xml;utf8,${encodedSvg}`;
};

import styled from 'styled-components';

// 假设你的SVG内容作为字符串存在
const rawSvgString = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path
        fill="#EEEEEE"
        fill-opacity="1"
        d="M0,192L48,165.3C96,139,192,85,288,69.3C384,53,480,75,576,90.7C672,107,768,117,864,128C960,139,1056,149,1152,128C1248,107,1344,53,1392,26.7L1440,0L1440,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>
`;

/**
 * 将SVG字符串转换为Data URI格式。
 * @param {string} svgString - 原始SVG字符串。
 * @returns {string} - Data URI字符串。
 */
const svgToDataURI = (svgString) => {
  const encodedSvg = svgString
    .replace(/#/g, '%23')
    .replace(/{/g, '%7B')
    .replace(/}/g, '%7D')
    .replace(/</g, '%3C')
    .replace(/>/g, '%3E')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29')
    .replace(/&/g, '%26')
    .replace(/'/g, '%27')
    .replace(/"/g, '%22');

  return `data:image/svg+xml;utf8,${encodedSvg}`;
};

// 使用辅助函数生成Data URI
const dataURI = svgToDataURI(rawSvgString);

const Container = styled.div`
  background-image: url(${dataURI});
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 320px; /* 根据SVG的viewBox或实际需求设置高度 */
`;

function MyComponent() {
  return <Container />;
}

export default MyComponent;