OpenHAB自定义Widget：SVG坐标与背景图等比例映射需求

我在YAML中使用f7-card组件，组件内包含一张背景图，同时在背景图上方绘制SVG多边形。现在需要实现SVG坐标与背景图坐标的等比例缩放映射（不受界面缩放影响），以此来绘制房间区域（这是一个OpenHAB自定义Widget）。

以下是我的代码：

uid: anwesenheit_nach_sektor
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 12, 2023, 7:50:34 AM
component: f7-card
config:
  style:
    background-image: url('/static/images/top_view.jpg')
    background-size: contain
    background-repeat: no-repeat
    background-position: center
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: center
    overflow: hidden
    opacity: 1
slots:
  default:
    - component: svg
      config:
        height: 100%
        viewBox: 0 0 40 40
        width: 100%
      slots:
        default:
          - component: polygon
            config:
              points: "0,0 11,57.792 0,25.544 29.039,0.208 58,25.792"
              fill: red
              fill-opacity: 0.6
              visible: =items.Test_item.state == "ON" 

当前效果如下：

内容的提问来源于stack exchange，提问作者Christoph