Ссылка из svg на документ

#html #css #svg

Элементы по цвету должны быть в группах. При наведении на один цвет, реагировать
должны все остальные идентичные цвета. При клике на любой элемент из группы нужно перейти
по ссылке на ид вне svg. Как сделать внешнюю ссылку во вне svg?



.section {
  min-height: 100vh;
  width: 800px;
  margin: 0 auto;
}

svg {
  background: url(http://joxi.net/Vrwpzx6SOxWRQm.png) no-repeat 0 0;
}

g {
  opacity: .7;
}

g:hover {
  opacity: .5;
}

  


  
Красный


  
Зеленый


  
Синий




    

Ответы

Ответ 1

Изменил polygon на rect с использованием transform="rotate()", добавил  в
SVG, сделал рабочий title



.section {
  min-height: 100vh;
  width: 800px;
  margin: 0 auto;
}

svg {
  background: url(http://joxi.net/Vrwpzx6SOxWRQm.png) no-repeat 0 0;
}

g {
  opacity: .7;
}

g:hover {
  opacity: .5;
}

  


  
Красный


  
Зеленый


  
Синий



Ответ 2

Оказывается ссылку можно ставить прямо во внутрь svg:



.section {
  min-height: 100vh;
}

svg {
  background: url(http://joxi.net/Vrwpzx6SOxWRQm.png) no-repeat 0 0;
}

g {
  opacity: .7;
}

g:hover {
  opacity: .5;
}

  


  
Красный


  
Зеленый


  
Синий





Правда title не работает, но это в данном случае не так важно.