Как использовать функцию onmouseover, чтобы выделить часть изображения SVG?

У меня есть SVG-изображение карты Европы с разделами для каждой страны, представленными путями. Если я наведу курсор на страну, я хочу, чтобы непрозрачность страны, на которую наведен курсор, изменилась на 0,5. Я попытался определить функцию JavaScript для вызова, но, похоже, ничего не происходит, когда я навожу курсор на страну. Вот мой SVG-код для справки и JavaScript, который я пытался написать:

<script
    xlink:href = "../map.js"
    id = "script99"
    type = "text/javascript" />
 <g
    inkscape:groupmode = "layer"
    id = "layer2"
    class = "section"
    inkscape:label = "paths"
    transform = "translate(0,-230.143)">
   <path
      style = "fill:#3399ff;stroke:#000000;stroke-width:0.06832593px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
      d = "m 170.10418,253.29039 0.16365,-1.29169 2.4003,-0.68196 2.91852,-0.51346 0.90921,0.17651 0.12727,0.61776 -0.50914,0.82636 -0.14547,1.3639 -1.51836,1.04298 -0.82736,0.85845 c 0,0 -0.28187,0.48137 -0.33642,0.48939 -0.0545,0.007 -0.99103,-0.7381 -0.99103,-0.7381 l -0.66371,-0.43325 -0.60915,-1.37191 z"
      id = "ukraine" 
      onclick = "Here(id)"
      onmouseover = "MouseOver(this)"
      inkscape:connector-curvature = "0"
      /> 
function MouseOver(elem){
    elem.opacity = 0.1;
}

вы пробовали наведение css?

Mister Jojo 02.04.2019 02:18

@MrJ, как мне это сделать? У меня нет внешнего файла css, который я использую для стилизации svg.

user4041267 02.04.2019 02:28

@MrJ Нет, я оборачиваю этот код только в теги svg. Я подумал, что поскольку я могу реализовать onclick таким образом, я смогу реализовать и onmouseover таким же образом.

user4041267 02.04.2019 02:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
378
1

Ответы 1

Я удалил встроенные стили и поместил их в тег <style>. Как видите, тег <style> находится внутри элемента svg.

К вашим стилям я добавил

#ukraine:hover {
      fill-opacity: 0.5;
    }

Это демо:

<svg viewBox = "170 250 7 7">
  <style type = "text/css">
        <![CDATA[
        #ukraine {
  fill: #3399ff;
  fill-opacity: 1;
  stroke: #000000;
  stroke-width: 0.06832593px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-opacity: 1;
}

#ukraine:hover {
  fill-opacity: 0.5;
}
        ]]> 
  </style>
  
   <path id = "ukraine"
      d = "m 170.10418,253.29039 0.16365,-1.29169 2.4003,-0.68196 2.91852,-0.51346 0.90921,0.17651 0.12727,0.61776 -0.50914,0.82636 -0.14547,1.3639 -1.51836,1.04298 -0.82736,0.85845 c 0,0 -0.28187,0.48137 -0.33642,0.48939 -0.0545,0.007 -0.99103,-0.7381 -0.99103,-0.7381 l -0.66371,-0.43325 -0.60915,-1.37191 z"
       
      /> 
</svg>

Другие вопросы по теме