在 React 中根据数值动态设置 SVG 线条粗细

在 React 中根据数值动态设置 SVG 线条粗细

在 React 中，你可以根据不同的数值动态设置 SVG 元素的粗细（stroke-width）。以下是几种实现方式：

方法1：直接根据 props 设置 stroke-width

const DynamicSVG = ({ thickness }) => (
  <svg width="200" height="100">
    <line 
      x1="20" y1="50" 
      x2="180" y2="50" 
      stroke="black" 
      strokeWidth={thickness} 
    />
  </svg>
);

// 使用示例
<DynamicSVG thickness={5} />  // 粗线
<DynamicSVG thickness={1} />  // 细线

方法2：根据数值范围映射不同粗细

const getStrokeWidth = (value) => {
  if (value > 80) return 6;
  if (value > 50) return 4;
  if (value > 20) return 2;
  return 1;
};

const DynamicSVG = ({ value }) => (
  <svg width="200" height="100">
    <line 
      x1="20" y1="50" 
      x2="180" y2="50" 
      stroke="black" 
      strokeWidth={getStrokeWidth(value)} 
    />
  </svg>
);

// 使用示例
<DynamicSVG value={75} />  // 将显示中等粗细的线

方法3：使用 CSS 类和样式

// CSS 文件或 style 标签中
.thin { stroke-width: 1px; }
.medium { stroke-width: 3px; }
.thick { stroke-width: 5px; }

// React 组件
const DynamicSVG = ({ thicknessLevel }) => {
  const strokeClass = 
    thicknessLevel === 'high' ? 'thick' :
    thicknessLevel === 'medium' ? 'medium' :
    'thin';

  return (
    <svg width="200" height="100">
      <line 
        x1="20" y1="50" 
        x2="180" y2="50" 
        stroke="black" 
        className={strokeClass} 
      />
    </svg>
  );
};

方法4：使用比例缩放

const DynamicSVG = ({ value, maxValue = 100 }) => {
  // 根据value占maxValue的比例计算strokeWidth
  const strokeWidth = Math.max(1, (value / maxValue) * 10);
  
  return (
    <svg width="200" height="100">
      <line 
        x1="20" y1="50" 
        x2="180" y2="50" 
        stroke="black" 
        strokeWidth={strokeWidth} 
      />
    </svg>
  );
};

// 使用示例
<DynamicSVG value={30} maxValue={100} />

方法5：完整的动态图表示例

const DynamicChart = ({ data }) => (
  <svg width="300" height="200">
    {data.map((item, index) => (
      <line
        key={index}
        x1={50 + index * 50}
        y1={180}
        x2={50 + index * 50}
        y2={180 - item.value * 1.5}
        stroke="#4a90e2"
        strokeWidth={item.value / 10}
        strokeLinecap="round"
      />
    ))}
  </svg>
);

// 使用示例
const chartData = [
  { value: 40 },
  { value: 60 },
  { value: 80 },
  { value: 30 }
];

<DynamicChart data={chartData} />

注意事项

1. React 属性命名：在 SVG 中通常使用 stroke-width，但在 React 中需要使用驼峰命名 strokeWidth

2. 最小宽度：建议设置最小宽度（如 Math.max(1, calculatedWidth)）避免线条不可见

3. 性能考虑：对于大量动态 SVG 元素，考虑使用 CSS 类而不是内联样式

4. 动画效果：如果需要平滑过渡，可以使用 CSS 过渡或 React 动画库

这些方法可以灵活地根据你的具体需求调整，无论是简单的静态显示还是复杂的数据可视化场景。