Блог

Главная - Вопросы по программированию - Щелчок по определенной части SVG-файла

Щелчок по определенной части SVG-файла

#javascript #html #css #svg

#javascript #HTML #css #svg

Вопрос:

Я бы хотел, чтобы часть моего SVG действовала как кнопка и была «интерактивной». Я понимаю, что могу использовать <rect> и Javascript, но мне пришлось бы изменять размер и положение прямоугольника с каждым разным разрешением экрана.

Мне просто интересно, есть ли более простой способ сделать это?

Вот мои фрагменты кода:

example.html

 svg {
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  position: absolute;
}

#svg-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#example {
  display: block;
  margin: auto;
  width: 70%;
} 
 <div id="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
    <rect width="9%" height="4%" x="51%" y="60%" />
  </svg>
  <img id="example" src="example.svg"/>
</div>

Комментарии:

1. Нет, вы не можете определить, какая часть SVG была нажата внутри <img /> . Вам нужно преобразовать SVG в HTML и прослушать щелчок по rect нему .

2. @vovchisko Могу я спросить, что вы подразумеваете под «отображением SVG в HTML»? Спасибо!

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

4. @guekling Поместите SVG прямо в HTML, как в вашем примере. Без использования img тега.

Ответ №1:

SVG может обрабатывать динамические настройки с помощью JavaScript так же, как это делает HTML.

Просто используйте embed тег и поместите некоторый код в свой SVG-файл:

 <embed type="image/svg xml" src="image.svg" />

Ответ №2:

Здесь я просто помещаю все в тег «» и просто добавляю css для тега

a, a: наведение курсора { оформление текста: отсутствует;}

 <div id="svg-container">
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
        <rect width="9%" height="4%" x="51%" y="60%" />
    </svg>
</a>
<img id="example" src="example.svg"/>