An element situated over a svg is not clickable

问题

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.

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

the css of yp-date-range-selector is :

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

In inspect mode the SVG looks like this:

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.

回答1:

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.

来源：https://stackoverflow.com/questions/50925424/an-element-situated-over-a-svg-is-not-clickable

标签

html

css

svg