Изменение заливки встроенного пути SVG при нажатии
Я новичок в html и т. д., И я пытаюсь создать карту SVG, где можно изменить цвет заливки страны (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" });
});
Любая помощь будет очень признательна!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Может попробовать:
svg:hover path {
"your css"
}
Оу, у тебя это уже работало? Извините, что прочитал сообщение неправильно
<script>
$('path').on("click", function() {
$(this).css({ fill: "#ff0000" });
});
</script>
Этот небольшой пример - лучшее, что я могу сделать :) Не очень хорошо разбираюсь в js, но, возможно, вы сможете улучшить.
Вы пробовали сделать это с помощью добавления / удаления класса при нажатии?
Вы можете сделать это с помощью манипулирования классом по щелчку (используя изменение атрибута класса, поскольку jquery addClass не будет работать с SVG, см. это для более подробной информации). Очень наивная реализация будет выглядеть ниже:
$('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>Спасибо! Это в значительной степени именно то, что я ищу, но я почему-то все еще не могу заставить его работать. В теге скрипта в html файле мне нужно указать путь к моему файлу main.js, правильно?
Да, вам также необходимо убедиться, что библиотека jquery импортирована. Кроме того, я бы всегда помещал SVG внутри контейнера div с четкой шириной / высотой (в соответствии с вашими потребностями). Что вам не подходит? какая ошибка?
Ах, так что это может быть проблемой на самом деле. Я просто использую текстовый редактор, поэтому сообщений об ошибках нет, но веб-страница просто не реагирует на щелчки. Как импортировать библиотеку jquery?
Ах, понял! Когда библиотека jQuery импортирована, это решение также отлично работает. Этот ссылка здесь разъясняет, как это сделать, если кто-то наткнется на ту же проблему.
noice;) примите ответ, если вы чувствуете, что это помогло;)
Если вы не можете использовать 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>Отлично, отлично работает, спасибо! Я обнаружил, что тег скрипта должен быть после тега svg, и раньше это вызывало некоторые проблемы.
Другой вариант - использовать 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>
Да, это для зависания, это уже работает. Практически то же самое с щелчком вызывает у меня головную боль