I created a simple example of what I would like to do:
This is the widget:
uid: TEST_SVG_widget
tags: []
props:
parameters:
- description: Path to the SVG-file
label: Source of SVG file
name: svg-src
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Nov 24, 2022, 7:29:52 PM
component: f7-block
config:
style:
--state-color: "=(items[props.item].state == 'ON')? 'green !important;' : 'yellow !important;'"
stylesheet: >
.test {
fill: var(--state-color)
}
path#pump_Waermetauscher_FBH {
fill: var(--state-color)
}
slots:
default:
- component: div
config:
content: test
- component: f7-row
config:
tag: svg
style: display:none
slots:
default:
- component: f7-row
config:
tag: use
href: =(props.svg-src || '/static/images/test.svg')
height: 100px
width: 100px
and this is the test.svg:
Basically a simple icon added in a new document in inkscape
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="7.2406502mm"
height="7.0417399mm"
viewBox="0 0 7.2406502 7.0417399"
version="1.1"
id="svg927"
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
sodipodi:docname="test.svg">
<defs
id="defs921" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="21.790757"
inkscape:cy="16.369268"
inkscape:document-units="px"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
fit-margin-top="1"
fit-margin-right="1"
fit-margin-bottom="1"
fit-margin-left="1"
lock-margins="true"
inkscape:window-width="1254"
inkscape:window-height="906"
inkscape:window-x="82"
inkscape:window-y="0"
inkscape:window-maximized="0" />
<metadata
id="metadata924">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-102.21301,-144.6458)">
<path
fill="currentColor"
class="test"
d="m 108.45366,150.68754 v -1.68059 h -0.39305 a 2.4369015,2.6049025 0 0 0 0.131,-0.84028 2.3582917,2.5208732 0 0 0 -2.35828,-2.52087 h -2.62032 v 1.68058 h 0.39304 c -0.0839,0.26329 -0.13102,0.54618 -0.13102,0.84029 a 2.3582917,2.5208732 0 0 0 2.3583,2.52087 h 2.62033 m -0.7861,-2.52087 c 0,0.35852 -0.0891,0.69184 -0.24631,0.98034 l -0.90663,-0.5602 c 0.0655,-0.12323 0.10481,-0.26609 0.10481,-0.42014 0,-0.18206 -0.0551,-0.35012 -0.14674,-0.48738 l 0.85424,-0.65262 c 0.20962,0.32211 0.34063,0.71985 0.34063,1.14 m -1.83423,1.96068 c -0.67867,0 -1.27086,-0.39495 -1.58791,-0.98034 l 0.90663,-0.5602 c 0.13626,0.25208 0.39043,0.42014 0.68128,0.42014 h 0.0759 l 0.0996,1.112 -0.17556,0.008 m 0,-2.80097 c -0.31706,0 -0.59219,0.20168 -0.71536,0.49298 l -0.95379,-0.46497 a 1.8326547,1.9589986 0 0 1 1.66915,-1.14839 v 1.12038 m 0,0.5602 c 0.14412,0 0.26203,0.12604 0.26203,0.28009 0,0.15407 -0.11791,0.2801 -0.26203,0.2801 -0.14412,0 -0.26204,-0.12603 -0.26204,-0.2801 0,-0.15405 0.11792,-0.28009 0.26204,-0.28009 z"
id="pump_Waermetauscher_FBH"
style="display:inline;stroke-width:0.270915"
inkscape:label="pump_Waermetauscher_FBH" />
</g>
</svg>
What I would like to achieve is to control the fill propperty of the path. Either via a dynamic stylesheet or via JS.
Current issues with that test widget:
- the SVG is not loading from the file
- the variable for the stylesheet shows just the variable name in the header