如何在SVG路径中的图像上添加悬停效果？

时间：2018-10-31 08:00:56

标签： html css svg mousehover

我正在使用SVG路径设计放射状菜单：

Home Network Landing Page Menu

每个“扇区”应具有一个图像，当鼠标光标位于该扇区内时，该图像会发生变化。

我已经在:hover文件中的几乎所有内容上使用.css样式进行了测试，但是我想不出一种方法来使图像与突出显示的区域一起改变。 / p> 

<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>

当不使用JavaScript突出显示SVG路径时，是否有办法切换到其他图像？

您可以在这里查看我的菜单尝试的完整代码： https://jsfiddle.net/tjdbkge5/

编辑：与其替换图像，不如使用CSS过滤器将其淡出也可以。我只是没有设法通过SVG路径来触发它们（它们仅在鼠标悬停在图像本身上时才触发）。

示例：

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

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

2 个答案:

答案 0 :(得分：1)

我知道您没有使用JavaScript。

您是否考虑过使用SVG代替图像？如果您的图像都像交通信号灯一样，则可以使用SVG，在这种情况下，可以仅使用CSS。

我正在为此使用JavaScript。有一个use元素可以重用图像。 use元素的xlink：href属性在鼠标悬停和鼠标移出时发生更改。

我已经在路径中添加了一个id（“紫色”），但是当所有图像都放置到位时，可以用不同的方法来实现。

在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>

更新

这是另一个我使用SVG而不是图像的示例：

在您的CSS中，我添加了2行：

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

我使用的是<use>，而不是#purple路径之后的SVG符号（Google的主页图标），而不是图片。

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>

答案 1 :(得分：1)

要做的所有事情都在每个扇区中放置两个符号。一个最初是可见的，另一个是隐藏的。然后，当您将鼠标悬停在该扇区上时，隐藏第一个扇区并显示第二个扇区。

<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>

相关问题
最新问题