html - 位于 svg 上方的元素不可点击

Question

svg 包含更多元素，其中之一是下拉选择器。我遇到的问题是选择器只能在其顶部边缘被点击，而不能在选择器的其他任何地方被点击。

选择器称为 yp-date-range-selector。在下一张图片中，可以看到它唯一可点击的部分(顶部边缘)。

yp-date-range-selector 的 css 是:

.yp-date-range-selector{
    height: 29px; 
    margin-top: 0px; 
    font-size: 12px;
}

如果我往上看，它看起来像:

.rtm-alerts {
    background-color: #f7f7f7;
    .rtm-alerts__content{
        display: flex;
        flex-direction: column;
        min-height: 75%;           
        > div {
            display: flex;
            justify-content: space-between; 
            .yp-date-range-selector{
                    height: 29px; 
                    margin-top: 0px; 
                    font-size: 12px;
                }
            }
        }
    }

在检查模式下，SVG 看起来像这样:

包含 SVG 的 css:

.rtm-alerts {
    background-color: #f7f7f7;
    .rtm-alerts__content{
        display: flex;
        flex-direction: column;
        min-height: 75%;
        .alerts-chart {
                display: flex;
                flex-direction: row;
                flex-shrink: 0;
                width: 100%;
                min-width: 65vmax;
                margin-right: 3vmax;
                height: 120px;
                .bb-chart-line {
                    .bb-shapes{
                        circle {
                            r: 10;
                        }
                    }
                }
                .bb-axis-y{
                    .domain, .tick{
                        display: none;
                    }
                    .bb-axis-y-label{
                        font-weight: normal;
                        font-size: 12px;
                        fill: #666666;
                    }
                }
        }
    }
}

我不知道我在说什么很清楚，或者是否提供了所有需要的信息，但我想知道如何让选择器在它的所有表面上都可以点击，而不仅仅是顶部边缘。

Answer 1

您的一个 div 与您的 SVG 重叠。在 inspect element 中，找到导致重叠的 div 并在您的 css 中将 z-index:-1 设置为它或将 svg 元素设置为 z-index:2 。