具有可点击区域作为svg路径的图表图像

Question

我使用React创建了一个应用程序，允许用户在人体图上选择一条肌肉以查看有关该肌肉的信息。

下一步，我现在想删除按钮，而是允许用户直接单击图中的肌肉。此外，我希望在用户将鼠标悬停在其上时突出显示肌肉，并突出显示当前选择的肌肉。

最初，我的计划是将当前图图像切成每块肌肉一张图像，然后使用单击处理程序将每张肌肉图像绝对定位在当前图图像的顶部，该处理程序将图像的常规版本换成高亮显示悬停或单击时的版本。

但是，我想知道是否可以使用 svg路径？在React中如何运作？

---

当前代码

// BodyImage component
export class BodyImage extends Component {

    // when the component renders
    render() {
        return (
            <div className="BodyImage">

                <img 
                    className="body body-front"
                    alt="Front of the human body" 
                    src={require('../assets/images/body-front.png')} 
                />

                <div className="overlay">
                    { this.props.muscles.map( muscle => {
                        return (
                            <div key={muscle.id}>
                                { muscle.image && muscle.image.file
                                ? (                                    
                                <button 
                                    onClick={this.props.handleClickSelectMuscle} 
                                    style={muscle.image.position}
                                    value={muscle.id}
                                >
                                    <img 
                                        src={require('../assets/images/' + muscle.image.file )} 
                                        alt={muscle.h1} 
                                    />
                                </button>              
                                )
                                : null
                                }
                            </div>
                        );
                    })}
                </div>  

            </div>
        )
    }
}