ReactJS中SVG的path属性d报错：预期数字，求解决方案

错误原因 #

你遇到的报错是因为SVG文件里的{{tankHeight}}属于无效占位符——React导入SVG组件后，不会解析这类模板语法，浏览器直接将其当作字符串解析路径时，无法识别为合法数字，导致路径属性d校验失败。

解决方案1：快速修复SVG初始路径 #

直接将SVG里的占位符替换为一个合法的初始数值（比如计算逻辑中的默认最大值340），组件加载后useEffect会自动替换为对应百分比的数值：

修改SVG中的gasLevelPath路径：

<path id="gasLevelPath" d="M688.536 338.066H67.6509V340.41H688.536V338.066Z" fill="url(#paint1_linear_1027_65)"/>

原React组件代码无需修改，useEffect会在tankHeight变化时正确更新路径属性。

解决方案2：React式数据驱动（推荐） #

放弃直接操作DOM的方式，利用React组件的props传递动态值，更符合React数据驱动的设计理念：

1. 修改SVG文件，将其改为接收props的React组件，直接插值生成路径：

<svg width="751" height="347" viewBox="0 0 751 347" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1027_65)">
<path d="M644.844 345.025C672.212 345.025 694.399 280.056 694.399 199.913C694.399 119.77 672.212 54.8013 644.844 54.8013C617.475 54.8013 595.288 119.77 595.288 199.913C595.288 280.056 617.475 345.025 644.844 345.025Z" fill="url(#paint0_radial_1027_65)" stroke="#1D1D1B" stroke-width="1.97904" stroke-miterlimit="10"/>
<path opacity="0.53" d="M660.551 338.066H59.0801V63.4346H660.551C697.867 150.227 697.867 251.273 660.551 338.066Z" fill="#D3D3D3"/>
<path id="gasLevelPath" d={`M688.536 338.066H67.6509V${props.tankHeight}.41H688.536V338.066Z`} fill="url(#paint1_linear_1027_65)"/>
<!-- 剩余SVG代码保持不变 -->
</svg>

2. 修改React组件，直接将计算好的tankHeight作为props传递给SVG组件：

import React from 'react';
import './styles.css';
import { ReactComponent as TanqueSVG } from '../../assets/img/tank.svg';

const Tank = ({ percent }) => {
  const tankHeight = Math.floor(340 - (percent * 2.8));

  return (
    <div>
      <TanqueSVG tankHeight={tankHeight} />
    </div>
  );
};

export default Tank;

这种方式无需依赖useEffect操作DOM，完全由React的props驱动视图更新，代码更简洁可靠。

内容的提问来源于stack exchange，提问作者Daniel di Navaronne