Double SVG with usersvg.

[stinobook]

Swiss Army Knife version

2.4.4

Bug description

I think usersvg injects an SVG twice, noticed this when using style filter invert that it didnt work unless i switched the invert from 0 to 1 after page was loaded. also noticed SAK 'reshaping' the svg to the correct dimensions twice.

To Reproduce

Steps to reproduce the behavior: Card code:

                    type: 'custom:swiss-army-knife-card'
                    aspectratio: 1/1
                    entities:
                    - entity: sensor.recycleapp_pmd
                    layout:
                      styles:
                        card:
                          background: rgba(97, 69, 71, 1)
                          border: none
                          box-shadow: none
                      toolsets:
                        - toolset: toolset-trash
                          position: 
                           cx: 50
                           cy: 50
                          tools:
                            - type: 'usersvg'
                              position:
                                cx: 25
                                cy: 25
                                height: 45
                                width: 45
                              style: 'images'
                              images:
                                - default: /local/images/pmd.svg
                              styles:
                                usersvg:
                                  filter: invert(1)
                            - type: text
                              position:
                                cx: 10
                                cy: 80
                              text: 'PMD'
                              styles:
                                text:
                                  text-anchor: start
                                  font-size: 14em
                                  font-weight: 500
                            - type: state
                              position:
                                cx: 10
                                cy: 92
                              entity_index: 0
                              styles:
                                state:
                                  text-anchor: start
                                  font-size: 7em
                                  opacity: 0.5

Expected behavior

Can't make invert work since it inverts twice because of the double svg overtop one another.

Screenshots

'normally loaded'

disabled 1 of the filters via inspector:

Completely deleting the 2nd SVG still shows the SVG in the card, here disabling the filter doesn't do anything:

[AmoebeLabs]

The external SVG is loaded in three steps:

• loading it as external file/image
• Loading triggers the injector to load the contents
• that content is cached by SAK to render this with Lit (web component libray HA is using)

The first 2 steps should be hidden by Lit, as only the final result must be rendered. If you see multiple visible renders, I should check the steps. Futhermore, styling on the injected SVG should be absent, as the surrounding SVG is used for styling and sizing.

NTS:

• check Lit Until and/or asyncReplace documentation and implementation
• Check Lit styleMaps and styleClass definitions while loading external SVG
• Check SVG hierarchy difference between injecting and not injecting and Lit when/choose directives

[AmoebeLabs]

Invert now works:

The Tres has an filter: invert(1) styling, and is injected. It turns yellow into purple.

[AmoebeLabs]

Closed with release V2.4.4