# Contrib-ui-svg: edit stop-offset in linearGradient

**URL:** <https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638>\
**Category:** General\
**Created:** [1 October 2020 17:24 UTC](https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638 "2020-10-01T17:24:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [1 October 2020 17:24 UTC](https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638/1 "2020-10-01T17:24:23Z")

</div>

![captured](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3c736e025a0ef2bd9d8c25b89bf549931672758f.gif)

Based on the very valuable help from Steve-Mcl, I made this changing bars in the gif.  
Hovever I tried to find a way to make the "Fractions" inside an circular indicator.  
The three color circle on top is an SVG element with linearGradient in three stops.

Is it possible to pass my values into the stop-offset positions with the same databind methods as you previously helped with?

They don't seem to react in the same way.

```auto

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <defs>
  <style type="text/css">
   <![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: green; }
        .stop2 { stop-color: red; }
        .stop3 { stop-color: blue; }
      ]]>
  </style>
  <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
   <stop offset="0%" stop-color="green"/>
   <stop offset="50%" stop-color="red"/>
   <stop offset="100%" stop-color="blue"/>
  </linearGradient>
 </defs>
 <g>
    

  <title>background</title>
  <rect x="-1" y="-1" width="152" height="152" id="canvas_background" fill="none"/>
  <g id="canvasGrid" display="none">
   <rect id="svg_5" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <ellipse stroke="#000" transform="rotate(-0.13142412900924683 75,75.4519577026385) " fill="url(#Gradient2)" stroke-width="0.5" stroke-opacity="null" cx="75" cy="75.45196" id="svg_3" rx="74.83183" ry="74.66749"/>
  <path fill="#224ce5" stroke="#000" stroke-width="0.5" stroke-opacity="null" fill-opacity="null" opacity="0.5" d="m50.12552,4.36473" id="svg_4"/>
 </g>
</svg>

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 October 2020 18:19 UTC](https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638/2 "2020-10-01T18:19:10Z")

</div>

> [@AHAV](#):
>
> They don't seem to react in the same way

Hi Andreas,  
Can you explain what goes wrong, because that doesn't give us much info to help you.

> [@AHAV](#):
>
> Is it possible to pass my values into the stop-offset positions

I would expect it should work. But I see you have not specified id's for the 'stop' elements, so you cannot bind them to msg fields in the "Binding" tabsheet. How did you tried to do that?

It would be better if you share your (simplified) flow, so we can see your svg node settings, and your input messages.  
Bart

---

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [1 October 2020 20:25 UTC](https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638/3 "2020-10-01T20:25:40Z")

</div>

> [@BartButenaers](#):
>
> I would expect it should work. But I see you have not specified id's for the 'stop' elements, so you cannot bind them to msg fields in the "Binding" tabsheet. How did you tried to do that?

I didn't know the basics here.. so by getting the hints on setting ID on the stop points, it was just the same procedure. Thank you!

```auto
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
   <stop id="stopp1" offset="0%" stop-color="green"/>
   <stop id="stopp2" offset="50%" stop-color="red"/>
   <stop id="stopp3" offset="100%" stop-color="blue"/>
  </linearGradient>

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 October 2020 21:10 UTC](https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638/4 "2020-10-01T21:10:39Z")

</div>

Glad that you found it, based on only a little advise!  
We tried to make it a bit easier via our config screen, but unfortunately SVG will always be very hard to get started with ...

---

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [2 October 2020 11:51 UTC](https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638/5 "2020-10-02T11:51:21Z")

</div>

![captured (1)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3d7fd2f501e6757ee0dde0c07e51465454d011e0.gif)

The top SVG here is the preliminary result.  
I made at 5 stop gradient to avoid too much mix of colours between the endpoints.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 October 2020 11:51 UTC](https://discourse.nodered.org/t/contrib-ui-svg-edit-stop-offset-in-lineargradient/33638/6 "2020-10-16T11:51:27Z")

</div>

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