SVG可点击环形扇区问题：嵌套环形点击区域异常求助

你的核心问题是内层SVG的空白画布区域拦截了外层SVG的点击事件——虽然内层只显示环形扇区，但整个SVG画布是完整的正方形，且z-index更高，导致外层扇区被遮挡无法触发点击。

以下是两种直接有效的解决方案：

方案1：通过pointer-events精准控制点击区域 #

给内层SVG设置pointer-events: none，让它的空白区域不拦截点击，再给内层的<a>或<path>恢复点击能力，仅让形状本身响应交互。

修改后的CSS代码：

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

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

.sosa {
    position: absolute;
}

/* 内层SVG（z-index更高的那个）取消空白区域的点击拦截 */
.sosa[style*="z-index:99"] {
    pointer-events: none;
}
/* 仅让内层的扇区形状响应点击 */
.sosa[style*="z-index:99"] a,
.sosa[style*="z-index:99"] path {
    pointer-events: auto;
}

如果后续有更多层级的嵌套，建议给内层SVG添加专属类（比如inner-ring）来替代属性选择器，代码可读性更高。

方案2：合并所有SVG到同一个画布（更优结构） #

把多个SVG的内容合并到单个<svg>中，通过transform调整内层环形的位置，彻底避免层级遮挡问题。这种结构更简洁，也符合SVG的设计逻辑。

合并后的HTML代码：

<div id="container">
    <div id="drawing">
        <svg xmlns="http://www.w3.org/2000/svg" width="502" height="502">
            <!-- 外层环形扇区 -->
            <g style="stroke:black;stroke-width:1">
                <a href="#"><path id="outer-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="outer-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="outer-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="outer-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>
            <!-- 内层环形扇区，通过translate移到画布中心 -->
            <g style="stroke:black;stroke-width:1" transform="translate(100,100)">
                <a href="#"><path id="inner-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="inner-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>
    </div>
</div>

对应的CSS可以简化，无需绝对定位和z-index：

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

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

内容的提问来源于stack exchange，提问作者tugdual