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

207

25 февраля 2018, 23:47

Элементы по цвету должны быть в группах. При наведении на один цвет, реагировать должны все остальные идентичные цвета. При клике на любой элемент из группы нужно перейти по ссылке на ид вне 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; 
}

<section class="section"> 
  <svg width="800" height="400"> 
    <g href="#red" fill-opacity=".5" fill="#ed4543" stroke="#ed4543" stroke-width="4"> 
      <polygon points="498,96 553,70 571,116 514,139"/> 
      <polygon points="158,328 203,310 223,369 176,383"/> 
    </g> 
 
    <g href="#green" fill-opacity=".5" fill="#1bad03" stroke="#1bad03" stroke-width="4"> 
      <polygon points="242,295 286,277 302,316 259,339"/> 
      <polygon points="425,228 472,215 500,260 441,277"/> 
    </g> 
 
    <g href="#blue" fill-opacity=".5" fill="#1e98ff" stroke="#1e98ff" stroke-width="4"> 
      <polygon points="138,246 170,229 185,270 154,287"/> 
      <polygon points="250,170 305,160 324,210 270,222"/> 
    </g> 
  </svg> 
</section> 
<section id="red" class="section"> 
  <h1>Красный</h1> 
</section> 
<section id="green" class="section"> 
  <h1>Зеленый</h1> 
</section> 
<section id="blue" class="section"> 
  <h1>Синий</h1> 
</section>

Answer 1

Изменил polygon на rect с использованием transform="rotate()", добавил <a></a> в 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; 
}

<section class="section"> 
  <svg width="800" height="400"> 
<a href="#red"> 
    <g fill-opacity=".5" fill="#ed4543" stroke="#ed4543" stroke-width="4"> 
    <title>RED</title> 
      <rect x="155" y="320" width="50" height="65" transform="rotate(-15 155 320)"/> 
      <rect x="555" y="75" width="45" height="60" transform="rotate(70 555 75)"/> 
    </g> 
</a> 
<a href="#green"> 
<title>GREEN</title> 
    <g fill-opacity=".5" fill="#1bad03" stroke="#1bad03" stroke-width="4"> 
      <rect x="242" y="245" width="45" height="50" transform="rotate(70 242 295)"/> 
      <rect x="425" y="170" width="50" height="60" transform="rotate(70 425 228)"/> 
    </g> 
</a> 
<a href="#blue"> 
<title>BLUE</title> 
    <g fill-opacity=".5" fill="#1e98ff" stroke="#1e98ff" stroke-width="4"> 
      <rect x="140" y="246" width="30" height="50" transform="rotate(-20 140 246)"/> 
      <rect x="255" y="170" width="50" height="55" transform="rotate(-18 255 170)"/> 
    </g> 
    </a> 
  </svg> 
</section> 
<section id="red" class="section"> 
  <h1>Красный</h1> 
</section> 
<section id="green" class="section"> 
  <h1>Зеленый</h1> 
</section> 
<section id="blue" class="section"> 
  <h1>Синий</h1> 
</section>

Answer 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; 
}

<section class="section"> 
  <svg width="800" height="400"> 
    <a href="#red" title="красный"> 
      <g fill-opacity=".5" fill="#ed4543" stroke="#ed4543" stroke-width="4"> 
        <polygon points="498,96 553,70 571,116 514,139"/> 
        <polygon points="158,328 203,310 223,369 176,383"/> 
      </g> 
    </a> 
 
    <a href="#green" title="зеленый"> 
      <g fill-opacity=".5" fill="#1bad03" stroke="#1bad03" stroke-width="4"> 
        <polygon points="242,295 286,277 302,316 259,339"/> 
        <polygon points="425,228 472,215 500,260 441,277"/> 
      </g> 
    </a> 
 
    <a href="#blue" title="синий"> 
      <g fill-opacity=".5" fill="#1e98ff" stroke="#1e98ff" stroke-width="4"> 
        <polygon points="138,246 170,229 185,270 154,287"/> 
        <polygon points="250,170 305,160 324,210 270,222"/> 
      </g> 
    </a> 
  </svg> 
</section> 
<section id="red" class="section"> 
  <h1>Красный</h1> 
</section> 
<section id="green" class="section"> 
  <h1>Зеленый</h1> 
</section> 
<section id="blue" class="section"> 
  <h1>Синий</h1> 
</section>

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