当前位置：首页 > news >正文

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

news 2025/7/19 6:15:02

在 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的比例计算strokeWidthconst 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) => (<linekey={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} />