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

General
1

captured

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.



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

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

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

3

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!

<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>
1 Like
4

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

5

captured (1)

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

2 Likes
6

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