Изображение диаграммы с кликабельными областями в виде svg-путей - PullRequest
Новая
       20

Изображение диаграммы с кликабельными областями в виде svg-путей

1 голос
/ 12 июля 2019

Используя React, я создал приложение, которое позволяет пользователям выбирать мышцу на диаграмме человеческого тела для просмотра информации об этой мышце.

enter image description here

В качестве следующего шага я хотел бы удалить кнопки и вместо этого позволить пользователю щелкнуть мышью на диаграмме напрямую. Кроме того, я хотел бы выделить мышцы, когда пользователь наводит на них мышь, а также выделить выбранные в данный момент мышцы.

Первоначально, мой план состоял в том, чтобы разделить текущее изображение диаграммы на одно изображение на мышцу, а затем расположить каждое изображение мышцы абсолютно поверх текущего изображения диаграммы с помощью обработчика щелчка, который заменяет обычную версию изображения для выделенного версия при наведении или нажатии.

Однако мне интересно, могу ли я использовать это svg paths для? Как это будет работать в 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>
        )
    }
}
...