带有 svg 路径的可点击圆形扇区

Question

我正在为一个项目设计嵌套圆圈；我用最适合我的 svg 改编了这个answer，使间隙和边框很容易添加到路径中。我也尝试过在这个topic中使用倾斜和边框方法，但效果不佳。

我得到了嵌套的圆圈，其中的部分我很高兴：

但是我想让这些部分可点击，但每个部分都被限制在 div 中，阻止我只能访问形状。我无法让它发挥作用。 如果我的光标位于标记区域（见下图），则我的内部部分不可选择（这很好），但由于重叠的 div，外部部分也不可选择（这应该是）。

我怎样才能让它发挥作用？

我的代码现在几乎是一个 JS 类，但它生成以下 html/css :

<div id="container">
    <div id="drawing">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:99;" class="sosa" width="302" height="302">
            <g style="stroke:black;stroke-width:1">
                <a href="#"><path id="sosa0" d="M 150.99,1 L 151,101 A 50,50, 0,0,1 151,201 L 151,301 A 150,150, 0,0,0, 150.99,1" style="fill:hsl(270, 80%, 55%)"></path></a>
                <a href="#"><path id="sosa1" d="M 151,301 L 151,201 A 50,50, 0,0,1 150.99,101 L 150.99,1 A 150,150, 0,0,0, 151,301" style="fill:hsl(450, 80%, 55%)"></path></a>
            </g>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:98;" class="sosa" width="502" height="502">
            <g style="stroke:black;stroke-width:1">
                <a href="#"><path id="sosa0" d="M 250.99,1 L 250.99,101 A 150,150, 0,0,1 401,250.99 L 501,250.99 A 250,250, 0,0,0, 250.99,1" style="fill:hsl(270, 80%, 55%)"></path></a>
                <a href="#"><path id="sosa1" d="M 501,250.99 L 401,250.99 A 150,150, 0,0,1 251,401 L 251,501 A 250,250, 0,0,0, 501,250.99" style="fill:hsl(360, 80%, 55%)"></path></a>
                <a href="#"><path id="sosa2" d="M 251,501 L 251,401 A 150,150, 0,0,1 101,251 L 1,251 A 250,250, 0,0,0, 251,501" style="fill:hsl(450, 80%, 55%)"></path></a>
                <a href="#"><path id="sosa3" d="M 1,251 L 101,251 A 150,150, 0,0,1 250.99,101 L 250.99,1 A 250,250, 0,0,0, 1,251" style="fill:hsl(540, 80%, 55%)"></path></a>
            </g>
        </svg>
    </div>
</div>

我通过将圆居中来嵌套圆，用

position: absolute;

堆叠它们并使内圆与最后一个外圆的大小相同。

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#drawing {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sosa {
    position: absolute;
}

Answer 1

幸运的是，我们谈论的是圆形，因此您所需要做的就是使用

svg

属性将

border-radius

制作成圆形。

document.querySelectorAll("a").forEach(function(elem) {
  elem.addEventListener('click', function(ev) {
    alert("clicked")
  })
})

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#drawing {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sosa {
  position: absolute;
}

.sosa #sosa0:hover {
  background: red;
  border: 1px solid blue;
  fill: rgba(255, 0, 255, 1);
}

#sosa0 {
  fill: hsl(270, 80%, 55%);
}

svg {
  border: 1px solid red;
  border-radius: 50%;
}

<div id="container">
  <div id="drawing">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:99;" class="sosa" width="302" height="302">
            <g style="stroke:black;stroke-width:1">
                <a href="#"><path id="sosa0" d="M 150.99,1 L 151,101 A 50,50, 0,0,1 151,201 L 151,301 A 150,150, 0,0,0, 150.99,1" style=""></path></a>
                <a href="#"><path id="sosa1" d="M 151,301 L 151,201 A 50,50, 0,0,1 150.99,101 L 150.99,1 A 150,150, 0,0,0, 151,301" style="fill:hsl(450, 80%, 55%)"></path></a>
            </g>
        </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:98;" class="sosa" width="502" height="502">
            <g style="stroke:black;stroke-width:1">
                <a href="#"><path id="sosa0" d="M 250.99,1 L 250.99,101 A 150,150, 0,0,1 401,250.99 L 501,250.99 A 250,250, 0,0,0, 250.99,1" style=""></path></a>
                <a href="#"><path id="sosa1" d="M 501,250.99 L 401,250.99 A 150,150, 0,0,1 251,401 L 251,501 A 250,250, 0,0,0, 501,250.99" style="fill:hsl(360, 80%, 55%)"></path></a>
                <a href="#"><path id="sosa2" d="M 251,501 L 251,401 A 150,150, 0,0,1 101,251 L 1,251 A 250,250, 0,0,0, 251,501" style="fill:hsl(450, 80%, 55%)"></path></a>
                <a href="#"><path id="sosa3" d="M 1,251 L 101,251 A 150,150, 0,0,1 250.99,101 L 250.99,1 A 250,250, 0,0,0, 1,251" style="fill:hsl(540, 80%, 55%)"></path></a>
            </g>
        </svg>
  </div>
</div>