Как добавить растровое изображение в SVG и позиционировать на нем объекты?

#javascript #css #svg

Кто может подсказать вот какую штуку. На странице есть изображение, которое увеличивается
в зависимости от размера экрана. И на нем есть объекты 
Вопрос в том. как отпозиционировать эти объекты, чтобы они не слетали когда изображение
увеличивается?
Вот тут это реализовано(на последнем экране перед футером) https://straticainternational.com/products/broadway?variant=17254881820761
,но не могу докопаться как, потому что идет просчет через js как я понимаю.
Кто может подсказать как сделать?
    

Ответы

Ответ 1

Хочу добавить ещё один нюанс. Многие знают, что можно использовать tooltip SVG, который
выводится при наведении курсора на объект. Чтобы это работало, нужно объект svg обернуть
групповыми тегами  и поместить внутрь теги  
 .....  



Оказывается можно делать вложенные 
	
    
	 
 
      
	   
	
	   
	    
	
	
	  
	
	  
	   
	
    


Ответ 2

Вот вариант с использованием svg



body{
  margin:0;
  overflow:hidden;
}
circle {
  fill:red;
  transition:200ms;
  cursor:pointer;
  stroke: transparent;
}

g:hover circle, g:hover path {
  transform: scale(1.2) rotate(45deg);
  
}

g:hover circle{
  stroke-width: 0.5;
  stroke: white;
}

path {
  stroke: white;
  pointer-events: none;
  transition:200ms;
}