Изменить заполнение встроенного SVG-пути по клику

Question

Я новичок в html и т. Д., И я пытаюсь создать карту SVG, в которой можно изменить цвет заливки страны (a path), нажав на нее.

ИтакПока мне удалось изменить заливку при наведении курсора на , но я не могу заставить его работать так, чтобы цвет переключался при нажатии. Итак, цель в том, чтобы пользователь мог навести курсор на траекторию ивыделеноКогда он щелкает, заливка изменяется на какое-то значение («помечается») и снова изменяется на первоначальный цвет заливки после второго щелчка. Как реализовать переключение цвета заливки при щелчке по пути?

Это часть html-файла, исключены только другие пути svg:

<link rel="stylesheet" class="st0"type="text/css" class="st0"href="main.css" class="st0"/>

<?xml version="1.0" class="st0"encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1"
     id="world-map" class="st0"inkscape:version="0.91 r13725" class="st0"sodipodi:docname="World_map_-_low_resolution.svg" class="st0"xmlns:cc="http://creativecommons.org/ns#" class="st0"xmlns:dc="http://purl.org/dc/elements/1.1/" class="st0"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" class="st0"xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" class="st0"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" class="st0"xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg" class="st0"xmlns:xlink="http://www.w3.org/1999/xlink" class="st0"x="0px" class="st0"y="0px" class="st0"viewBox="0 0 950 620"
     style="enable-background:new 0 0 950 620;" class="st0"xml:space="preserve">

<path id="estonia" fill="#F5F5F5" d="M517.8,143.7l-5.6-0.2l-3.5,2.2l0,1.6l2.3,2.2l7.2,1.2L517.8,143.7L517.8,143.7z
M506.8,147.6l-1.5-0.1l-0.9,0.9l0.6,1l1.5,0.1l0.8-1.2L506.8,147.6L506.8,147.6z
M506.6,151.7l-1.5-0.1l-2.7,3.2v1.5l0.9,0.4l1.8,0.1l2.9-2.4l0.4-0.8L506.6,151.7L506.6,151.7z"/>

<path id="sweden" fill="#F5F5F5" d="M497.7,104.6l2,1.8h3.7l2,3.9l0.5,6.7l-5,3.5v3.5l-3.5,4.8l-2,0.2l-2.8,4.6l0.2,4.4l4.8,3.5l-0.4,2l-1.8,2.8
    l-2.8,2.4l0.2,7.9l-4.2,1.5l-1.5,3.1h-2l-1.1-5.5l-4.6-7l3.8-6.3l0.3-15.6l2.6-1.4l0.6-8.9l7.4-10.6L497.7,104.6L497.7,104.6z
    M498.5,150.2l-2.1,1.7l1.1,2.4l1.9-1.8L498.5,150.2L498.5,150.2z"/>

</svg>
<script src="main.js"></script>

Это файл css:

#world-map{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
path:hover {
  stroke: #339999 !important;
  stroke-width:2px;
  stroke-linejoin: round;
  fill: #002868 !important;
  cursor: pointer;
}

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

$('path').on("click", function(e) {
    $(this).html({ fill: "#ff0000" });
});

Любая помощь будет очень признателен!

Answer 1

Другой вариант - использовать jQuery для переключения между двумя классами:

$('path').on("click", function() {
    var n = $(this).attr("class");

    if(n == "clicked") {
    	$(this).attr("class", "");
    }
    else {
    	$(this).attr("class", "clicked");
    }
});

#world-map{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
path:hover {
  stroke: #002868 !important;
  stroke-width:2px;
  stroke-linejoin: round;
  fill: #002868 !important;
  cursor: pointer;
}
.clicked {
  fill: #ff9800;
  stroke: #ff9800;
  stroke-width: 2px;
  stroke-linejoin: round;;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="100%" height="100%" viewBox="400 0 500 320" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<path id="estonia" fill="#F5F5F5" d="M517.8,143.7l-5.6-0.2l-3.5,2.2l0,1.6l2.3,2.2l7.2,1.2L517.8,143.7L517.8,143.7z
M506.8,147.6l-1.5-0.1l-0.9,0.9l0.6,1l1.5,0.1l0.8-1.2L506.8,147.6L506.8,147.6z
M506.6,151.7l-1.5-0.1l-2.7,3.2v1.5l0.9,0.4l1.8,0.1l2.9-2.4l0.4-0.8L506.6,151.7L506.6,151.7z"/>

<path id="sweden" fill="#F5F5F5" d="M497.7,104.6l2,1.8h3.7l2,3.9l0.5,6.7l-5,3.5v3.5l-3.5,4.8l-2,0.2l-2.8,4.6l0.2,4.4l4.8,3.5l-0.4,2l-1.8,2.8
	l-2.8,2.4l0.2,7.9l-4.2,1.5l-1.5,3.1h-2l-1.1-5.5l-4.6-7l3.8-6.3l0.3-15.6l2.6-1.4l0.6-8.9l7.4-10.6L497.7,104.6L497.7,104.6z
	M498.5,150.2l-2.1,1.7l1.1,2.4l1.9-1.8L498.5,150.2L498.5,150.2z"/>

<path id="finland" fill="#F5F5F5" d="M506.8,116.9l2.1,0.9l1.3,2.4l-1.3,1.7l-6.4,7l-1.1,3.7l1.5,5.4l5,3.7l6.6-3.1l5.3-0.7l5-7.9l-3.7-8.7
	l-3.5-8.3l0.5-5.4l-2.2-0.4l-0.6-3.9l-3-4.8l-3.3,2.3l-1.3,5.3l-3.5-2.1l-4.8-1.2l-1.1,1.3l1.9,1.7l3.4-0.1l2.7,4.4L506.8,116.9
	L506.8,116.9z"/>

<path id="norway" fill="#F5F5F5" d="M515.5,102.1l2-1.5l-0.2-1.7l-1.3-0.7l0.2-2h1.1v-1.1l-4.8-1.3l-7.1,0.7l-0.7,3.1l-1.6-0.5l-1.1-1.8l-3.5,0.2
	L498,99l-1.6,0.7l-0.9-1.8l-7.3,5.9l1.5,1.7l-2.8,1.3l-6.2,12.4l-2.2,1.5l0.2,1.1l2.2,1.1l-0.5,2.4l-3.7-0.2l-1.1-1.3l-2.4,2.8
	l-1.5,1.1l-0.4,2.6L470,131l-3.3,0.7l-1.6,5.2l1.1,8.5l1.3,3.9l1.5,1.5l3.3-0.2l4.8-4.6l1.8-3.1l0.5,4.6l3.1-5.5l0.2-15.5l2.5-1.6
	l0.8-8.6l7.7-11.1l3.7-1.3l1.6-2l5.5,1.3l2.8,1.7l0.9-4.6l4.6-2.8L515.5,102.1L515.5,102.1z
M488.3,54l-1.6-1.7l-3.7,1.8h-6.7l-1.1,3.9l3.8,3.3l1.6-0.2l2.4-4l2,1.4l-1.4,2.8l-0.7,4.2l1.6,2.6l3.5-5.9l4.6-5.6l-1.8-1.5L488.3,54L488.3,54z
	M490.3,46.8l-3,2.7l1.8,2.7h3.2l1.3,1.8l3.9,2l4.5-2.6l3.1-2.6l-1.1-2.1l-3.1-1.8l-2.2,2l-1.5-1.9l-1.2,0.1l-1.5,3.3l-2.2-2.3l-0.2-1.5L490.3,46.8L490.3,46.8z
	M497,59.1l-2.4,2.1l-2,1.5l0.9,1.7l1.9,0.6l3.1-1.4l1.4-1.8l-1.3-2.1L497,59.1L497,59.1z"/>

</svg>

Answer 2

Вы можете сделать это с помощью манипуляции с классом по щелчку (используя изменение атрибута класса, так как addClass jquery не будет работать с SVG, см. this для получения дополнительной информации). Очень наивная реализация будет выглядеть следующим образом:

$('path').on("click", function() {
    $('path.selected').attr("class", "");
    $(this).attr("class", "selected");
});

path {
  cursor: pointer;
  fill: grey
}
.selected {
  fill: #002868;
  stroke: #339999;
  stroke-width: 2px;
  stroke-linejoin: round;;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<svg width="100%" height="100%" viewBox="400 0 500 320" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path id="estonia" d="M517.8,143.7l-5.6-0.2l-3.5,2.2l0,1.6l2.3,2.2l7.2,1.2L517.8,143.7L517.8,143.7z
M506.8,147.6l-1.5-0.1l-0.9,0.9l0.6,1l1.5,0.1l0.8-1.2L506.8,147.6L506.8,147.6z
M506.6,151.7l-1.5-0.1l-2.7,3.2v1.5l0.9,0.4l1.8,0.1l2.9-2.4l0.4-0.8L506.6,151.7L506.6,151.7z"></path>

<path id="sweden" d="M497.7,104.6l2,1.8h3.7l2,3.9l0.5,6.7l-5,3.5v3.5l-3.5,4.8l-2,0.2l-2.8,4.6l0.2,4.4l4.8,3.5l-0.4,2l-1.8,2.8
    l-2.8,2.4l0.2,7.9l-4.2,1.5l-1.5,3.1h-2l-1.1-5.5l-4.6-7l3.8-6.3l0.3-15.6l2.6-1.4l0.6-8.9l7.4-10.6L497.7,104.6L497.7,104.6z
    M498.5,150.2l-2.1,1.7l1.1,2.4l1.9-1.8L498.5,150.2L498.5,150.2z"></path>

</svg>

Answer 3

Если вы не можете использовать Jquery, как упомянул Сергей, вы можете вместо этого использовать обычный Javascript, используя метод classList.toggle().

// first we get all the path elements and put them in an array
let paths = document.getElementsByTagName('path')

//now we can loop over the array and add an eventlistener to each path in the array
// it listens to the 'click' event and then runs function toggleClass()
for(let i=0; i<paths.length; i++){
    paths[i].addEventListener('click', toggleClass)
}

// In the function toggleClass we can toggle the 'clicked' class.
function toggleClass() {
    this.classList.toggle('clicked')
}

path {
  cursor: pointer;
  fill: grey
}

.selected {
  fill: #002868;
  stroke: #339999;
  stroke-width: 2px;
  stroke-linejoin: round;;
}

.clicked {
  fill: #ff0000;
}

<svg width="100%" height="100%" viewBox="400 0 500 320" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <path id="estonia" d="M517.8,143.7l-5.6-0.2l-3.5,2.2l0,1.6l2.3,2.2l7.2,1.2L517.8,143.7L517.8,143.7z
M506.8,147.6l-1.5-0.1l-0.9,0.9l0.6,1l1.5,0.1l0.8-1.2L506.8,147.6L506.8,147.6z
M506.6,151.7l-1.5-0.1l-2.7,3.2v1.5l0.9,0.4l1.8,0.1l2.9-2.4l0.4-0.8L506.6,151.7L506.6,151.7z"></path>

    <path id="sweden" d="M497.7,104.6l2,1.8h3.7l2,3.9l0.5,6.7l-5,3.5v3.5l-3.5,4.8l-2,0.2l-2.8,4.6l0.2,4.4l4.8,3.5l-0.4,2l-1.8,2.8
    l-2.8,2.4l0.2,7.9l-4.2,1.5l-1.5,3.1h-2l-1.1-5.5l-4.6-7l3.8-6.3l0.3-15.6l2.6-1.4l0.6-8.9l7.4-10.6L497.7,104.6L497.7,104.6z
    M498.5,150.2l-2.1,1.7l1.1,2.4l1.9-1.8L498.5,150.2L498.5,150.2z"></path>

</svg>

Answer 4

Может быть попробовать:

svg:hover path {
    "your css"
}

Оу, ты уже работал? Sry за чтение поста неправильно

<script>

$('path').on("click", function() {
    $(this).css({ fill: "#ff0000" });
});

</script>

Этот маленький образец - лучшее, что я могу сделать :) Не очень хорошо в js, но, возможно, вы можете улучшить.