获取 SVG 地图以在单击时更改颜色 [英] Getting an SVG map to change color on click

问题描述

我有一张 SVG 世界地图

I have an SVG map of the world

<path
     inkscape:connector-curvature="0"
     id="Algeria"
     onmouseover="displayName('Algeria')"
     data-name="Algeria"
     data-id="DZ"
     d="m 1021,336.9 -3.6,0.4 -2.2,-1.5 -5.6,0 -4.9,2.6 -2.7,-1 -8.7,0.5 -8.9,1.2 -5,2 -3.4,2.6 -5.7,1.2 -5.1,3.5 2,4.1 0.3,3.9 1.8,6.7 1.4,1.4 -1,2.5 -7,1 -2.5,2.4 -3.1,0.5 -0.3,4.7 -6.3,2.5 -2.1,3.2 -4.4,1.7 -5.4,1 -8.9,4.7 -0.1,7.5 0,0.4 -0.1,1.2 20.3,15.5 18.4,13.9 18.6,13.8 1.3,3 3.4,1.8 2.6,1.1 0.1,4 6.1,-0.6 7.8,-2.8 15.8,-12.5 18.6,-12.2 -2.5,-4 -4.3,-2.9 -2.6,1.2 -2,-3.6 -0.2,-2.7 -3.4,-4.7 2.1,-2.6 -0.5,-4 0.6,-3.5 -0.5,-2.9 0.9,-5.2 -0.4,-3 -1.9,-5.6 -2.6,-11.3 -3.4,-2.6 0,-1.5 -4.5,-3.8 -0.6,-4.8 3.2,-3.6 1.1,-5.3 -1,-6.2 1,-3.3 z"
     style="fill:#f2f2f2;fill-rule:evenodd" />

displayName 是我写的一个函数，当你将鼠标悬停在国家/地区时，它会添加文本.我现在想在我点击一个国家时改变颜色.

The displayName is a function I wrote that will add text when you mouseover the country. I now want to have the color change when I click a country.

我曾尝试在一些标签中执行此操作

I have tried to do this here inside some tags

var country_id = "Algeria";
var colour = "#004400";
var country = document.getElementById(country_id);
country.setAttributeNS(null, 'fill', colour);

然而这行不通.我对 JS 很陌生，尤其是 SVG.

However this doesn't work. I'm pretty new to JS and especially SVG.

推荐答案

你很接近，只需要使用像 elem.style.fill = colour;

You are very close, just need to use syntax like elem.style.fill = colour;

function displayName(elem){
  console.log(elem.id)
}

function onClickHandler(elem){
  var country_id = elem.id
  var colour = "#004400";
  //with selector:
  //var country = document.getElementById(country_id);
  //country.style.fill = colour;
  
  //or simply with elem arg passed into event handler:
  elem.style.fill = colour;
}

//Alternative method to attach events:
/*
const allPaths = document.querySelectorAll('svg > path');
allPaths.forEach(elem => elem.addEventListener('click', myFuncHandler));

function myFuncHandler(e){
  var country_id = e.target.id
  var colour = "#004400";
  e.target.style.fill = colour;
}
*/

<svg viewbox="250 250 1250 1000">
<path
     inkscape:connector-curvature="0"
     id="Algeria"
     onmouseover="displayName(this)"
     onclick="onClickHandler(this)"
     data-name="Algeria"
     data-id="DZ"
     d="m 1021,336.9 -3.6,0.4 -2.2,-1.5 -5.6,0 -4.9,2.6 -2.7,-1 -8.7,0.5 -8.9,1.2 -5,2 -3.4,2.6 -5.7,1.2 -5.1,3.5 2,4.1 0.3,3.9 1.8,6.7 1.4,1.4 -1,2.5 -7,1 -2.5,2.4 -3.1,0.5 -0.3,4.7 -6.3,2.5 -2.1,3.2 -4.4,1.7 -5.4,1 -8.9,4.7 -0.1,7.5 0,0.4 -0.1,1.2 20.3,15.5 18.4,13.9 18.6,13.8 1.3,3 3.4,1.8 2.6,1.1 0.1,4 6.1,-0.6 7.8,-2.8 15.8,-12.5 18.6,-12.2 -2.5,-4 -4.3,-2.9 -2.6,1.2 -2,-3.6 -0.2,-2.7 -3.4,-4.7 2.1,-2.6 -0.5,-4 0.6,-3.5 -0.5,-2.9 0.9,-5.2 -0.4,-3 -1.9,-5.6 -2.6,-11.3 -3.4,-2.6 0,-1.5 -4.5,-3.8 -0.6,-4.8 3.2,-3.6 1.1,-5.3 -1,-6.2 1,-3.3 z"
     style="fill:#f2f2f2;fill-rule:evenodd" />     
     
</svg>

或者，您可能需要考虑使用以下语法附加事件:

Alternatively, you might want to think about attaching events using this syntax:

const allPaths = document.querySelectorAll('svg > path');

allPaths.forEach(elem => elem.addEventListener('click', myFuncHandler));

那么你就不需要为每个路径元素添加属性 onclick="onClickHandler(this)".

Then you don't need to add the prop onclick="onClickHandler(this)" to each path element.

这篇关于获取 SVG 地图以在单击时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！