"stroke-dashoffset" works fine the the lovelact card preview, but no once you hit "save"

[Aephir]

Specifically, I have this circle:

    <circle
       style="display:inline;fill-opacity:1;fill-rule:nonzero;stroke:#323232;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="real_circle"
       cx="271.52206"
       cy="85.024849"
       r="28.786091" />

I need the circle to hide X % (100% - entity_state, which is charge of a phone) of what's behind. To do that, I put in my floorplan.yaml:

                  style: |
                    >
                    return `
                      stroke-dasharray: 162 162;
                      stroke-dashoffset: ${-(162*(entity.state/100))};
                      transform-box: fill-box;
                      transform-origin: center;
                      transform: rotate(180deg);
                    `;

(162 being because the "real" radius is r_real = r - (stroke-width/2) = 28.786091 - (6/2) = 25.786091. Meaning the circumference is c = 2 * pi * r_real ~ 162).

In the preview (editing the lovelace card) it looks as expected (I had the charge at 66%):

But once I click save, it looks all wonky:

and I have no clue why? It looks like it has done some scaling, since both the stroke-dashoffset and circle stroke-width (cmpared too what's behind) is off. But if I use the Firefox developer tools, the size, stroke-dasharray, and stroke-dashoffset of the circle are all what I set them to, so I don't see where the scaling has happened.

So basically, I'm completely inn the dark about what this behavior is, and how to fix this.

Any suggestions would be greatly appreciated.

[OzGav]

You are forging a new path here so all I can suggest is try using chrome and see if that reveals anything different. I do know Firefox has some caching issues that sometimes cause weird results.

[Aephir]

Unfortunately, it's exactly the same with Firefox, Chrome, Vivaldi, Safari, Epic, and a few others. The only one that's slightly different (though still not correct) is the Tor browser.

Here, it looks like this instead:

And all the browser's dev tools show that size and stroke-dashoffset are the same as I have set.

[OzGav]

I will try and set it myself and see what happens. Have you made it a different colour so you can see exactly what is happening and then try and fudge it so it works? Clunky I know…..

[Aephir]

Yeah, I've tried quite a few "random" numbers, but can't seem to see anything sensible. Let me know if you want me to send any files or additional code!

[Aephir]

So, I think it might relate to this part of the css file:

svg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}

If I delete it, is seems to work. I have the vector-effect: part from the examples, ad I'm not sure whether it will end up messing anything up eventually if I remove it?

I tried just overwriting for the specific object from the floorplan.yaml

                    >
                    return `
                      stroke-dasharray: 162 162;
                      stroke-dashoffset: ${-(162*(.66))};
                      transform-box: fill-box;
                      transform-origin: center;
                      transform: rotate(180deg);
                      vector-effect: none;
                    `;

but that didn't work. Any idea how to apply that on a single object, while retaining the vector-effect: non-scaling-stroke !important; in the css file?

[Aephir]

Thanks @OzGav & @exetico . I have to admit, I really know (almost) nothing about css, I just copied the examples and started working from them. So I probably won't remove all the dozens of !important and * until I have time to properly understand the impacts (and what a better solution is for each case).

It doesn't seem to do what I expect if I keep

svg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}

svg circle#battery_circle.p30_pro_battery_level{
    vector-effect: none!important;
}

(battery_circle.p30_pro_battery_level being the name of the circle in my real floorplan.svg), so for now I'll probably just delete it.

With the vector-effect: none!important; for the specific circle):

And when just deleting everything about vector-effect::

But thanks, at least there's one way to make this work now.

[exetico]

Np!

Next time, consider to create a "test"-pack for us 😃.

Btw, I like the graphics!

[Aephir]

Thanks, I'll share the svg and code here, I just need to decide on where to host the svg since it becomes ~43000 lines, and the forum only allows 32000.

[Aephir]

*characters. Not lines:)

[exetico]

Thank you for sharing your solution 😄