SVG hover выделить все страны на континенте

Question

У меня есть эта карта мира . Я знаю, как выделить каждую отдельную страну при наведении на нее курсора, но я хочу, чтобы все страны на континенте выделялись при наведении курсора на любую страну на этом континенте.

Answer 1

Та карта мира не очень организована, что я могу сказать. Есть коды стран орграфа , которые добавляются как классы (PE: для Перу). Вам придется просмотреть какой-либо ресурс всех орграфов или посмотреть, найдете ли вы что-то, что уже индексирует их по континентам. Это необходимо для создания сопоставления, чтобы вы знали, какие классы соответствуют каким континентам.

Затем вы можете настроить правила так, чтобы, если какая-либо страна была выделена, вы знали, что другие страны входят в состав одного континента, и можете выделить их.

const countryToContinent = {
    'CA': 'North America',
    'US': 'North America',
    // ...
};
const continentToCountries = {
    'North America': ['US', 'CA', 'MX', // ...],
    // ...
};
const landElements = document.getElementsByClassName('land');
landElements.forEach(land => {
    land.addEventListener('hover', event => {
        let continent;
        land.classList.forEach(className => {
            if(className !== 'land'){
                if(countryToContinent.hasOwnProperty(className)){
                    continent = countryToContinent[]
                }

            }
        });
        // this is just to be careful, there are a lot of svgs in there
        if(continent){
            // remove previously highlighted countries/continents
            const alreadyHighlightedCountries = document.getElementsByClassName('highlight-block');
            alreadyHighlightedCountries.forEach(highlightedCountry => {
                highlightedCountry.remove('highlight-block');
            });
            const countriesToHighlight = continentToCountries[continent];
            countriesToHighlight.forEach(country => {
                const countrySvg = document.getElementsByClassName(country);
                if(!countrySvg.classList.has('highlight-block')){
                    countrySvg.add('highlight-block');
                }
            });
        }

    });
});

Отдельно есть это в вашем CSS

.highlight-block {
    fill: red !important;
}