openHAB version: 5.2M5 Browser / app: Chrome
I’m building a custom widget that renders an inline svg with rect (and path) children. I want a tap on an SVG region to set a widget variable (vars.*) so I can switch between an overview and a detail view. I put action: variable / actionVariable / actionVariableValue directly on the SVG rect elements, exactly like I would on an oh-button.
Problem: tapping the SVG rectangles does not change the variable. The exact same action: variable on an oh-button works fine and updates the variable immediately.
Minimal reproducer below. Tapping the green/orange buttons sets vars.sel (the SVG text, the DOM oh-link text and the two conditional panels all react). Tapping the green/orange SVG rectangles does nothing. The label texts have pointer-events:none so they can’t intercept the tap.
Question: Is action/actionVariable supported on raw SVG child elements (rect, path, …), or only on oh-* / Framework7 components? If it’s not supported on SVG primitives, what’s the recommended pattern to make SVG regions clickable to set a widget variable (e.g. transparent oh-button overlays, an oh-link wrapper, a clickable/@click option, …)?
yaml:
version: 1
widgets:
widget_svg_action_test:
props:
parameterGroups: []
parameters: []
tags: []
component: f7-card
config:
title: SVG action=variable test
slots:
default:
- component: f7-card-content
slots:
default:
- component: svg
config:
viewBox: 0 0 240 120
style: width:100%;max-width:320px;height:auto;display:block;margin:0 auto;
slots:
default:
- component: rect
config:
x: 10
y: 10
width: 100
height: 40
rx: 6
fill: '#4caf50'
action: variable
actionVariable: sel
actionVariableValue: 1
style: cursor:pointer;
- component: text
config:
x: 60
y: 35
content: Tap A -> sel=1
text-anchor: middle
font-size: 10
fill: '#ffffff'
style: pointer-events:none;
- component: rect
config:
x: 130
y: 10
width: 100
height: 40
rx: 6
fill: '#ff9800'
action: variable
actionVariable: sel
actionVariableValue: 2
style: cursor:pointer;
- component: text
config:
x: 180
y: 35
content: Tap B -> sel=2
text-anchor: middle
font-size: 10
fill: '#ffffff'
style: pointer-events:none;
- component: text
config:
x: 120
y: 80
content: =('vars.sel (in SVG) = '+(vars.sel===undefined?'(empty)':vars.sel))
text-anchor: middle
font-size: 12
fill: var(--f7-text-color,#333)
- component: text
config:
x: 120
y: 105
content: '>> Panel A visible (sel==1)'
text-anchor: middle
font-size: 12
fill: '#4caf50'
style: =(vars.sel==1?'':'display:none;')
- component: text
config:
x: 120
y: 105
content: '>> Panel B visible (sel==2)'
text-anchor: middle
font-size: 12
fill: '#ff9800'
style: =(vars.sel==2?'':'display:none;')
- component: f7-block
config:
strong: true
inset: true
slots:
default:
- component: oh-link
config:
text: =('vars.sel (DOM) = '+(vars.sel===undefined?'(empty)':vars.sel))
- component: f7-block
config:
style: display:flex;gap:8px;justify-content:center;
slots:
default:
- component: oh-button
config:
text: Button A -> sel=1
fill: true
color: green
action: variable
actionVariable: sel
actionVariableValue: 1
- component: oh-button
config:
text: Button B -> sel=2
fill: true
color: orange
action: variable
actionVariable: sel
actionVariableValue: 2