ChrisA
December 7, 2022, 8:55pm
1
i have been trying to build a svg gradient into a widget for a while now. i am failing with the linear gradient in the “Yaml Style” format. Can someone help me rewrite this code.
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<rect width="100" height="50"/>
</svg>
JustinG
December 7, 2022, 9:31pm
2
You’ll need to give a little more context, because “rewrite this code” is not specific enough. Are you trying to rebuild the svg in a widget, if so, which version of OH are you on? Are you trying to apply a linear gradient to some other component?
ChrisA
December 7, 2022, 9:54pm
3
I want tu use this animation in an energy flow widget. the animated line shoud have one end with a gradient to transparent like a comet
uid: widget_svg5
tags: []
timestamp: Dec 7, 2022, 10:12:08 PM
component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
border: 1px solid blue
height: 200
width: 300
tag: svg
viewBox: 0 0 300 200
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M95,80 h110 c0,0 30,0 30,-30 v-10
fill: none
id: path6
stroke: blue
stroke-width: 2
tag: path
- component: f7-row
config:
d: M95,80 h110 c0,0 30,0 30,-30 v-10
fill: none
id: path6
stroke: white
stroke-width: 2
stroke-dasharray: 100, 50
tag: path
slots:
default:
- component: f7-row
config:
calcMode: linear
repeatCount: indefinite
tag: animate
attributeName: stroke-dashoffset
from: 0
to: 300
begin: "0"
dur: 10s
ChrisA
December 7, 2022, 10:03pm
4
like the effect in the tesla mobile app
JustinG
December 7, 2022, 11:41pm
5
As with the sample svg you posted, you first have to define the linear gradient in the svg defs section and give it a unique ID so you can refer to it later:
- component: f7-row
config:
tag: svg
...other svg config...
slots:
default:
- component: f7-row
config:
tag: defs
slots:
default:
- component: f7-row
config:
tag: linearGradient
id: lGrad1234
slots:
default:
- component: f7-row
config:
tag: stop
style:
stop-color: #000000
stop-opacity: 0
offset: 0
- component: f7-row
config:
tag: stop
style:
stop-color: #000000
stop-opacity: 1
offset: 1
Then, for any element that you want to apply that path to the line stroke, just refer to that gradient by it’s id:
- component: f7-row
config:
tag: path
stroke: url(#lGrad1234)
...other path config...
ChrisA
December 8, 2022, 7:23am
6
thanks for your quick reply, i am a bit closer to the syntax again. unfortunately the effect does not work as expected. the gradient should follow the path like a tail that dissolves. the current solution is good for horizontal vectors but not for those with horizontal and vertical parts.
uid: widget_svg5
tags: []
timestamp: Dec 7, 2022, 10:12:08 PM
component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
border: 1px solid blue
height: 200
width: 300
tag: svg
viewBox: 0 0 300 200
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
tag: defs
slots:
default:
- component: f7-row
config:
tag: linearGradient
id: lGrad1234
slots:
default:
- component: f7-row
config:
tag: stop
style:
stop-color: blue
stop-opacity: 1
offset: 0
- component: f7-row
config:
tag: stop
style:
stop-color: blue
stop-opacity: 0
offset: 1
- component: f7-row
config:
d: M95,130 h110 c0,0 30,0 30,-30 v-80
fill: none
id: path6
stroke: url(#lGrad1234)
stroke-width: 2
stroke-dasharray: 100, 50
tag: path
slots:
default:
- component: f7-row
config:
calcMode: linear
repeatCount: indefinite
tag: animate
attributeName: stroke-dashoffset
from: 0
to: 300
begin: "0"
dur: 10s
ChrisA
December 8, 2022, 7:57am
7
i believe a radial gradient that moves across the path could be a similar effect, i have found animate attribute names but am unable to make the gradient move along the path
ChrisA
December 10, 2022, 6:04pm
9
I found a solution: animated masks
uid: widget_svg5
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Dec 10, 2022, 3:37:39 PM
component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
border: 0px solid blue
height: 200
width: 300
tag: svg
viewBox: 0 0 300 200
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
tag: defs
slots:
default:
- component: f7-row
config:
id: gradmask2
tag: radialGradient
slots:
default:
- component: f7-row
config:
offset: 0
style:
stop-color: white
tag: stop
- component: f7-row
config:
offset: 1
style:
stop-color: black
tag: stop
- component: f7-row
config:
id: mask2
tag: mask
slots:
default:
- component: f7-row
config:
fill: url(#gradmask2)
r: 70
tag: circle
slots:
default:
- component: f7-row
config:
begin: 0.4
calcMode: linear
dur: 4
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
fill: white
r: 35
tag: circle
slots:
default:
- component: f7-row
config:
begin: 0
calcMode: linear
dur: 4
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M60,130 h145 c0,0 30,0 30,-30 v-155
fill: none
id: path1
tag: path
- component: f7-row
config:
d: M95,130 h110 c0,0 30,0 30,-30 v-85
fill: none
id: path3
stroke: lightblue
stroke-width: 1
tag: path
- component: f7-row
config:
d: M95,130 h110 c0,0 30,0 30,-30 v-85
fill: none
mask: url(#mask2)
stroke: blue
stroke-width: 5
tag: path
2 Likes
system
January 21, 2023, 10:24am
11
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.
i am an the actual stable version
