Svg animated linear gradient in a widget [solved]

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>

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?

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 :slight_smile: i am an the actual stable version

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

like the effect in the tesla mobile app

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...

image

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

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

Screen_Recording_20221208_104431_Chrome_1
now it looks like this :slight_smile:

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


Screen_Recording_20221210_185523_Chrome_1_1

1 Like

Screen_Recording_20221210_191941_Chrome_1_1

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.