位于 svg 上的元素不可点击 [英] An element situated over a svg is not clickable

问题描述

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

There is svg containing more elements, one of them being a drop-down selector. The problem I encounter is that the selector can be clicked only on the top edge of it but not anywhere else on the selector.

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

The selector is called yp-date-range-selector. In the next image it can be seen the only part of it which is clickable (the top edge).

yp-date-range-selector 的 css 是:

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

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

If I go upper it looks like:

.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 如下所示:

In inspect mode the SVG looks like this:

包含 SVG 的 css:

The css containing the SVG:

.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;
                    }
                }
        }
    }
}

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

I don't know if it is clear what I'm talking about or all the needed information is provided but I would like to know how to make the selector be clickable on all it surface, not only the top edge.

推荐答案

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

one of your div is over lapping your SVG. While in inspect element , find the div which is causing the overlap and set z-index:-1 to it or the svg element to z-index:2 in your css.

这篇关于位于 svg 上的元素不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！