Разные части SVG картинки, как разные ссылки

#html #css #css3 #svg #анимация

Картинка состоит из нескольких объектов, допустим, квадрат и круг. Хотелось бы, чтобы
при нажатии на круг происходил переход на один сайт, при нажатии на квадрат на другой
сайт. Можно ли как-то это реализовать?
    

Ответы

Ответ 1

Квадрат или прямоугольник в svg это код внутри тегов . Поэтому именно этот
тег нужно обернуть в теги ссылки. Они немного отличаются от тегов HTML   

   


  Современные браузеры уже поддерживают ссылку  в svg, как в html
      href="https://yandex.ru/" class="yandex-search">
   но лучше пока
  воздержаться от этого, так как в safari это  не работает.


При наведении на объект svg всплывает туллтип - подсказка. Это текст, который находится
внутри тегов 


 
 


	 




В сниппете ссылки не работают из-за требований безопасности, но если вы скачаете
файл и сохраните его в формате HTML,то ссылки будут рабочими.


Ответ 2

Вариант с анимацией  CSS  ссылок



.google {
  fill: dodgerblue;
  transition: 1.5s;
}

.yandex {
  fill: purple;
  transition: 1.5s;
}

.yandex:hover,
.google:hover {
  fill: gold;
}



Ответ 3

обернуть изображение в тег