Blur background under an element

[done7k]

I try to blur whatever under an element with CSS backdrop-filter: blur(1px) but it does not seems apply. I am talking about such effect here . Is there any workaround to get background blur under a svg text or image?

[exetico]

Please read a bit about applying CSS to SVG elements. Many of them are not impacting the SVG related elements.

Try and wrap your svg element in a g-element, and see if that changes things. Else, I'll need to do some research myself. I'm not that used to work with backdrop-filter.

[done7k]

In some cases the <g></g> really works and helps but seems not in this case ((
My part of SVG, it is not really to blur but only to draw some field around the text. Ican see in the browser's devtool the CSS is added but no any effect..

    <g id="sonoff_temperature">
        <text
            xml:space="preserve"
            style="font-style:normal;font-weight:normal;font-size:7.05556px;line-height:1.25;font-family:sans-serif;mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.264583"
            x="147.09753"
            y="117.27966"
            id="sensor.th01_1_sonoff_temperature"
            inkscape:label="sensor.th01_1_sonoff_temperature">
                <tspan
                    sodipodi:role="line"
                    id="tspan48041"
                    style="font-size:7.05556px;fill:#ffffff;stroke-width:0.264583"
                    x="147.09753"
                    y="117.27966">C
                </tspan>
        </text>
    </g>

and CSS for this element:

#sonoff_temperature {
/*
    background-color: rgba(255, 255, 255, 0.4);
    padding: 1rem;
    backdrop-filter: blur(3px);
*/
    background-color: rgba(180, 180, 180, 0.2);
    width: 1.7rem;
    height: 1.7rem;
    border: 0.7rem solid rgba(255, 255, 255, 0);
    border-radius: 50%;
 }

[pkozul]

Hi @done7k

I am not sure if this is along the lines of what you want. If you want some border, with blur, around your text, then you can try something like this in your CSS class (this should be applied to the <text> element, and not the inner <tspan>):

    text-shadow: 0 0 10px red;
    stroke: red;
    paint-order: stroke;

The paint-order: stroke; means the stroke (i.e. outline) will be drawn under the text, rather than on top of it.

Anyway, let us know if this is on the right path (pun intended).

[done7k]

This works but it is kind of different visualization style.
What I noticed, when a mouse pointer is hovered under an element on the plan the flooplan displays a black popup window with device info. The text from <title> tag there is on black background with opacity lower than 100%. I believe you can blur background even. How do you style this black-box? I do not know how I can catch it in the devtool to see its styling.