Question

Я проектирую радиальное меню, используя пути SVG:

Каждый «сектор» должен иметь изображение, которое изменяется, когда курсор мыши находится внутри этого сектора.

Я протестировал с помощью стилей :hover практически все, что есть в моем файле .css, но я не могу найти способ изменить изображение вместе с сектором, когда он становится подсвеченным.

<symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">

  <!-- Red light -->
  <image
    xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Srouge.png/80px-Srouge.png"
    width="83" height="83"
  ></image>

  <!-- Green light for hover, can't get it to work -->
  <!--
  <image
    xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png"
    width="83" height="83"
  ></image>
  -->

</symbol>

Есть ли способ переключиться на другое изображение, когда путь SVG выделен без использования JavaScript?

Вы можете просмотреть полный код попытки моего меню здесь: https://jsfiddle.net/tjdbkge5/

РЕДАКТИРОВАТЬ: вместо того, чтобы заменить изображение, CSS-фильтры тоже будут в порядке. Мне просто не удалось вызвать их с помощью пути SVG (они запускаются только тогда, когда мышь находится над самим изображением).

* * 1 022 Пример: * 1 023 *

symbol {
  overflow: visible;
  filter: grayscale(80%) brightness(25%);
  opacity: 0.25;
}

symbol:hover {
  filter: none;
  opacity: 1;
}

Paul LeBeau · Answer 1 · 31 октября 2018

Все, что вам нужно сделать, это поместить два символа в каждый сектор. Один изначально виден, а другой скрыт. Затем, когда вы наводите курсор на сектор, скройте первый и покажите второй.

<a class="item" ...>
  <path .. />
  <use xlink:href="#icon-1" ... />
  <use xlink:href="#icon-2" ... />
</a>

Для сокрытия и показа мы используем opacity:

.item use {
  transition: opacity 0.1s linear;
}

.item use.hovered {
  opacity: 0;
}

.item:hover use.unhovered {
  opacity: 0;
}

.item:hover use.hovered {
  opacity: 1;
}

Демо-версия:

body {
  background-color: #222222;
}

#menu {
    display: block;
    margin: 0 auto;
}

a {
    cursor: pointer;
    outline: none;
}

.item .sector {
    transition: all .1s linear;
    stroke: #111;
}

.item:hover .sector, .item:focus .sector {
    fill: #eee;
}

.item use {
  transition: opacity 0.1s linear;
}

.item use.hovered {
  opacity: 0;
}

.item:hover use.unhovered {
  opacity: 0;
}

.item:hover use.hovered {
  opacity: 1;
}


#item-1 {
  fill: #a364d9;
}
/* Next: #40a4d8 */

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Home Network Portal Page">

    <title>Portal</title>
    <!-- <link rel="stylesheet" type="text/css" href="menu.css"> -->

  </head>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="-252 -252 516 516"
      style="display:block; position:absolute; top:5%; left:5%; width:90%; height:90%;"
      id="menu"
    >
      <g id="symbolsContainer">
        <symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">
          <!-- Red light -->
          <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Srouge.png/80px-Srouge.png" height="83" width="83"></image>
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text>
        </symbol>
        <symbol class="icon icon-" id="icon-2" viewBox="0 0 83 83">
          <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83"></image>
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text>
        </symbol>
      </g>

      <g id="itemsContainer">

        <a
          class="item"
          id="item-1"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M 234.923155196477,-85.5050358314172
              A 250,250 0 0,1 234.923155196477,85.5050358314172
              L 117.461577598239,42.7525179157086
              A 125,125 0 0,0 117.461577598239,-42.7525179157086
              Z
            "
          ></path>
          <use
            xlink:href="#icon-1"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(90 0 0)"
            class="unhovered"
          ></use>
          <use
            xlink:href="#icon-2"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(90 0 0)"
            class="hovered"
          ></use>
        </a>

      </g>
    </svg>
  </body>
</html>

enxaneta · Answer 2 · 31 октября 2018

Я знаю, что вы сказали, что нет JavaScript.

Рассматривали ли вы использовать SVG вместо изображений? Если все ваши изображения похожи на светофор, вы можете использовать SVG, и в этом случае это может быть возможно с использованием только CSS.

Я использую JavaScript для этого. Существует элемент use для повторного использования изображения. Атрибут xlink: href элемента use изменяется при наведении и наведении мыши.

Я добавил идентификатор к пути («фиолетовый»), но это можно сделать по-другому, когда у вас есть все изображения на месте.

В CSS я добавил use{pointer-events:none} Надеюсь, это не мешает вашей функциональности.

const XLINK_NS="http://www.w3.org/1999/xlink"

purple.addEventListener("mouseover",()=>{
  us.setAttributeNS(XLINK_NS,"xlink:href", "#green")
})

purple.addEventListener("mouseout",()=>{
  us.setAttributeNS(XLINK_NS,"xlink:href", "#red")
})

body {
  background-color: #222222;
}

#menu {
    display: block;
    margin: 0 auto;
}

a {
    cursor: pointer;
    outline: none;
}

.item .sector {
    transition: all .1s linear;
    stroke: #111;
}

.item:hover .sector, .item:focus .sector {
    fill: #eee;
}

.menu-trigger {
    fill: #EA2A55;
    pointer-events: auto;
}

.menu-trigger:hover, .menu-trigger:focus {
    cursor: pointer;
}
symbol {
    overflow: visible;
}

#item-1 {
  fill: #a364d9;
}
#item-2 {
  fill: #ee6579;
}
#item-3 {
  fill: #db3937;
}
#item-4 {
  fill: #f66320;
}
#item-5 {
  fill: #f8a227;
}
#item-6 {
  fill: #fecc2f;
}
#item-7 {
  fill: #b2c224;
}
#item-8 {
  fill: #33beb7
}
/* Next: #40a4d8 */

use{pointer-events:none}

 <svg
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="-252 -252 516 516"
      style="display:block; position:absolute; top:5%; left:5%; width:90%; height:90%;"
      id="menu"
    >
   
   <defs>
     <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Srouge.png/80px-Srouge.png" height="83" width="83" id="red"></image>
     
     <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83" id="green"></image>
     
   </defs>
      <g id="symbolsContainer">
        <symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">
        <!-- Red light -->
        <use xlink:href="#red" id="us" />
        
        <!-- Green light for hover, can't get it to work -->
        <!--
        <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83"></image>
        -->
        
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text>
        </symbol>
        
        
        
        <symbol class="icon icon-" id="icon-2" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text>
        </symbol>
        <symbol class="icon icon-" id="icon-3" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">3</text>
        </symbol>
        <symbol class="icon icon-" id="icon-4" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">4</text>
        </symbol>
        <symbol class="icon icon-" id="icon-5" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">5</text>
        </symbol>
        <symbol class="icon icon-" id="icon-6" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">6</text>
        </symbol>
        <symbol class="icon icon-" id="icon-7" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">7</text>
        </symbol>
        <symbol class="icon icon-" id="icon-8" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">8</text>
        </symbol>
      </g>

      <g id="itemsContainer">

        <a
          class="item"
          id="item-1"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path id="purple"
            class="sector"
            d="
              M 234.923155196477,-85.5050358314172
              A 250,250 0 0,1 234.923155196477,85.5050358314172
              L 117.461577598239,42.7525179157086
              A 125,125 0 0,0 117.461577598239,-42.7525179157086
              Z
            "
          ></path>
          <use
            xlink:href="#icon-1"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(90 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-2"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M 105.654565435175,-226.576946759163
              A 250,250 0 0,1 226.576946759163,-105.654565435175
              L 113.288473379581,-52.8272827175874
              A 125,125 0 0,0 52.8272827175875,-113.288473379581
              Z
            "
          ></path>
          <use
            xlink:href="#icon-2"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(45 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-3"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -85.5050358314171,-234.923155196477
              A 250,250 0 0,1 85.5050358314172,-234.923155196477
              L 42.7525179157086,-117.461577598239
              A 125,125 0 0,0 -42.7525179157086,-117.461577598239
              Z
            "
          ></path>
          <use
            xlink:href="#icon-3"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(0 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-4"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -226.576946759163,-105.654565435175
              A 250,250 0 0,1 -105.654565435175,-226.576946759163
              L -52.8272827175874,-113.288473379581
              A 125,125 0 0,0 -113.288473379581,-52.8272827175874
              Z
            "
          ></path>
          <use
            xlink:href="#icon-4"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(315 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-5"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -234.923155196477,85.5050358314172
              A 250,250 0 0,1 -234.923155196477,-85.5050358314172
              L -117.461577598239,-42.7525179157086
              A 125,125 0 0,0 -117.461577598239,42.7525179157086
              Z
            "
          ></path>
          <use
            xlink:href="#icon-5"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(270 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-6"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -105.654565435175,226.576946759163
              A 250,250 0 0,1 -226.576946759163,105.654565435175
              L -113.288473379581,52.8272827175874
              A 125,125 0 0,0 -52.8272827175874,113.288473379581
              Z
            "
          ></path>
          <use
            xlink:href="#icon-6"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(225 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-7"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M 85.5050358314172,234.923155196477
              A 250,250 0 0,1 -85.5050358314172,234.923155196477
              L -42.7525179157086,117.461577598239
              A 125,125 0 0,0 42.7525179157086,117.461577598239
              Z
            "
          ></path>
          <use
            xlink:href="#icon-7"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(180 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-8"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M 226.576946759163,105.654565435175
              A 250,250 0 0,1 105.654565435175,226.576946759163
              L 52.8272827175874,113.288473379581
              A 125,125 0 0,0 113.288473379581,52.8272827175874
              Z
            "
          ></path>
          <use
            xlink:href="#icon-8"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(135 0 0)"
          ></use>
        </a>
      </g>
    </svg>

UPDATE

Вот еще один пример, где я использую SVG вместо изображений:

К вашему CSS я добавляю 2 строки:

use{pointer-events:none}
#purple:hover+use{fill:red}

Вместо изображения я использую символ SVG (значок дома Google), который я использую с <use> и идет сразу после пути #purple.

body {
  background-color: #222222;
}

#menu {
    display: block;
    margin: 0 auto;
}

a {
    cursor: pointer;
    outline: none;
}

.item .sector {
    transition: all .1s linear;
    stroke: #111;
}

.item:hover .sector, .item:focus .sector {
    fill: #eee;
}

.menu-trigger {
    fill: #EA2A55;
    pointer-events: auto;
}

.menu-trigger:hover, .menu-trigger:focus {
    cursor: pointer;
}
symbol {
    overflow: visible;
}

#item-1 {
  fill: #a364d9;
}
#item-2 {
  fill: #ee6579;
}
#item-3 {
  fill: #db3937;
}
#item-4 {
  fill: #f66320;
}
#item-5 {
  fill: #f8a227;
}
#item-6 {
  fill: #fecc2f;
}
#item-7 {
  fill: #b2c224;
}
#item-8 {
  fill: #33beb7
}
/* Next: #40a4d8 */

use{pointer-events:none}
#purple:hover+use{fill:red}

 <svg
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="-252 -252 516 516"
      style="display:block; position:absolute; top:5%; left:5%; width:90%; height:90%;"
      id="menu"
    >
   
   <defs>
    <symbol id="home" viewBox='0 0 24 24'><title>home</title>
    <path d='M10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z'></path>
    <!--<path d='M0 0h24v24h-24z' fill='none'></path>-->
    </symbol>
     
   </defs>
      <g id="symbolsContainer">
        <symbol class="icon icon-" id="icon-1" viewBox="0 0 83 83">
        <!-- Red light -->
        
        
        <!-- Green light for hover, can't get it to work -->
        <!--
        <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Svert.png/80px-Svert.png" height="83" width="83"></image>
        -->
        
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text>
        </symbol>
        
        
        
        <symbol class="icon icon-" id="icon-2" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text>
        </symbol>
        <symbol class="icon icon-" id="icon-3" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">3</text>
        </symbol>
        <symbol class="icon icon-" id="icon-4" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">4</text>
        </symbol>
        <symbol class="icon icon-" id="icon-5" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">5</text>
        </symbol>
        <symbol class="icon icon-" id="icon-6" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">6</text>
        </symbol>
        <symbol class="icon icon-" id="icon-7" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">7</text>
        </symbol>
        <symbol class="icon icon-" id="icon-8" viewBox="0 0 83 83">
          <!--Replace the contents of this symbol with the content of your icon-->
          <rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect>
          <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">8</text>
        </symbol>
      </g>

      <g id="itemsContainer">

        <a
          class="item"
          id="item-1"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path id="purple"
            class="sector"
            d="
              M 234.923155196477,-85.5050358314172
              A 250,250 0 0,1 234.923155196477,85.5050358314172
              L 117.461577598239,42.7525179157086
              A 125,125 0 0,0 117.461577598239,-42.7525179157086
              Z
            "
          ></path>
          
         
          <!--<use 
            xlink:href="#icon-1"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(90 0 0)"
          ></use>-->
          
          <use id="test" xlink:href="#home" width="83" height="83" x="-41.5" y="-230.5" fill="gold" transform="rotate(90 0 0)" />
        </a>

        <a
          class="item"
          id="item-2"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M 105.654565435175,-226.576946759163
              A 250,250 0 0,1 226.576946759163,-105.654565435175
              L 113.288473379581,-52.8272827175874
              A 125,125 0 0,0 52.8272827175875,-113.288473379581
              Z
            "
          ></path>
          <use
            xlink:href="#icon-2"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(45 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-3"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -85.5050358314171,-234.923155196477
              A 250,250 0 0,1 85.5050358314172,-234.923155196477
              L 42.7525179157086,-117.461577598239
              A 125,125 0 0,0 -42.7525179157086,-117.461577598239
              Z
            "
          ></path>
          <use
            xlink:href="#icon-3"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(0 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-4"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -226.576946759163,-105.654565435175
              A 250,250 0 0,1 -105.654565435175,-226.576946759163
              L -52.8272827175874,-113.288473379581
              A 125,125 0 0,0 -113.288473379581,-52.8272827175874
              Z
            "
          ></path>
          <use
            xlink:href="#icon-4"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(315 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-5"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -234.923155196477,85.5050358314172
              A 250,250 0 0,1 -234.923155196477,-85.5050358314172
              L -117.461577598239,-42.7525179157086
              A 125,125 0 0,0 -117.461577598239,42.7525179157086
              Z
            "
          ></path>
          <use
            xlink:href="#icon-5"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(270 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-6"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M -105.654565435175,226.576946759163
              A 250,250 0 0,1 -226.576946759163,105.654565435175
              L -113.288473379581,52.8272827175874
              A 125,125 0 0,0 -52.8272827175874,113.288473379581
              Z
            "
          ></path>
          <use
            xlink:href="#icon-6"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(225 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-7"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M 85.5050358314172,234.923155196477
              A 250,250 0 0,1 -85.5050358314172,234.923155196477
              L -42.7525179157086,117.461577598239
              A 125,125 0 0,0 42.7525179157086,117.461577598239
              Z
            "
          ></path>
          <use
            xlink:href="#icon-7"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(180 0 0)"
          ></use>
        </a>

        <a
          class="item"
          id="item-8"
          role="link"
          tabindex="0"
          xlink:href=" "
          xlink:title=" "
        >
          <path
            class="sector"
            d="
              M 226.576946759163,105.654565435175
              A 250,250 0 0,1 105.654565435175,226.576946759163
              L 52.8272827175874,113.288473379581
              A 125,125 0 0,0 113.288473379581,52.8272827175874
              Z
            "
          ></path>
          <use
            xlink:href="#icon-8"
            width="83" height="83"
            x="-41.5" y="-230.5"
            transform="rotate(135 0 0)"
          ></use>
        </a>
      </g>
    </svg>

Как добавить эффект наведения к изображению в пути SVG?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

UPDATE

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как добавить эффект наведения к изображению в пути SVG?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

UPDATE

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы