Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[liv-in-sky]

@wiesel-1

der reverse hat keine wirkung - ist wohl ein überbleibsel meiner tests

was aber funktioniert ist den stroke-dashoffset ins minus zu ändern

widget zum testen

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<svg width=\"900\" height=\"210\">\n\t\t<path class=\"loading101\" d=\"M50 0 L50 200 L250 200 L250 100 L400 100 L400 200 L500 200 L500 55 \" />\n\t\t  \n        \n\t\t</svg>\n\t\t\n\t\t\n\t\t<style>\n\t\t\n\t\t.loading101 {\n\tfill: none;\n\tstroke: lightblue;\n\t\tborder-radius: 50%;\n\tstroke-width: 5;\n\tstroke-dasharray: 15 5;\n\tanimation: strokeAni .7s infinite linear;\n}\n\n.inner {\n\tstroke: #c32e04;\n  animation-direction: reverse;\n\t\n}\n\n@keyframes strokeAni {\n\t0% {\n\t\tstroke-dashoffset: 40;\n\t}\n\t100% {\n\t\tstroke-dashoffset: 0;\n\t}\n}\n\n\t\t\n\t\t</style>"},"style":{"left":"523px","top":"880px","width":"530px","height":"234px","transform":"rotate(180deg)"},"widgetSet":"basic"}]

[Wiesel 1]

@liv-in-sky

Danke für den Tip. Wenn ich das Widget einfüge und das Vorzeichen bei stroke-dashoffset setze, fangen alle meine Leitungen an Rückwärts zu laufen ;-)... Ich hab ein kleines Heizungssystem damit ausgerüstet. Also Vor und Rücklauf. Und diese sollen entsprechend fließen. Die Loadings sind bereits mit einzelnen Nr. entkoppelt. Erstaunlich, das dein Loading auch meine anderen bereits bestehenden Systeme mit ändert.

Ich teste weiter. Ist auf jeden Fall ein Ansatz. Alternativ muss ich die einzelnen Koordinatenpunkte rückwärts anordnen ;-(...

[liv-in-sky]

@wiesel-1 du musst das strokeani auch umbenennen
Damit es nur für dieses Widget gültig ist

[Wiesel 1]

@liv-in-sky

Spitze!!! Genau das war es. 2x strokeani mit eigener Nummer gekennzeichnet und die Befehlsketten sind entkoppelt. Jetzt visualisiert jeder Strang so wie er soll. Die Striche gefallen mir dabei sogar noch besser wie die Pfeile.

Viele Dank für die Hilfe!

[mguenther]

@liv-in-sky

bekommt man es auch irgendwie hin, dass z.B. ein Farbverlauf in der Linie noch hinzugefügt werden kann?

Beispiel:
die gestrichelte Linie startet mit Rot und endet irgendwann mit Blau. Ich habe im Internet mir SVG angeschaut, bin aber noch nicht dahintergekommen. In einem Rechteck ist ein Farbverlauf wohl möglich.

[mguenther]

@liv-in-sky
Ich ergänze gleich meine 2. Frage. Ich bekomme es einfach nicht hin. Es gibt ja neben der Linie auch andere geometrische Formen.
Wie könnte ich denn z.B. die Reihenfolge Linie, Halbkreis, Linie, Halbkreis, Linie... oder Linie, Ellipse, Halbkreis, Ellipse... erzeugen?

Worauf möchte ich hinaus? Im Prinzip suche ich etwas wie so:

[liv-in-sky]

@mguenther sorry - aber so tief bin ich da nicht eingestiegen - wenn du eine lösung gefunden hast - gerne hier posten

[mguenther]

@liv-in-sky sagte in Lastfluss, Energie animierte Gif:

@mguenther sorry - aber so tief bin ich da nicht eingestiegen - wenn du eine lösung gefunden hast - gerne hier posten

alles gut, danke dir - wie immer. Dachte, du schüttelst das so einfach aus dem Ärmel - ich teste weiter...

[mguenther]

Es gibt ein paar Tools im Internet, sehe ich gerade und das erste (https://boxy-svg.com), was ich genutzt hatte, erzeugt sowas:

Der Export kostet halt etwas, ich muss mal sehen, ob ich eine kostenlose Variante (Testversion o.ä.) hinbekomme. Muss dann nur noch sehen, wie ich das in das Widget integriere

[liv-in-sky]

@mguenther

hab ein wenig gespielt

das ist rausgekommen - nehme aber an, du hast schon was gefunden:

Spoiler

<svg width="900" height="610" >
   	/>
   	<defs>
      
   <linearGradient id='MyGradient1011' x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset='0%' stop-color='red' />
     <stop offset='100%' stop-color=' lightblue' />
   </linearGradient>
       </defs>
       <g transform="scale(1)" style="stroke:url(#MyGradient1011) " >
        <path class="loading1011" d="M 180,120 A 10,10 0 0,0 180,180 l280 0
                                    A 10,10 0 1,1 460,240 l-280 0
                                    A 10,10 0 0,0 180,300 l280 0
                                    A 10,10 0 1,1 460,360 l-280 0"/>
       </g>
        
        
  
   	</svg>
   	
   	
   	<style>
   	
   	.loading1011 {
   fill: none;
   
   	border-radius: 50%;
   stroke-width: 5;
   stroke-dasharray: 15 5;
   animation: strokeAni .7s infinite linear;
}

.inner {
   stroke: #c32e04;
 
   
}

@keyframes strokeAni {
   0% {
   	stroke-dashoffset: -40;
   }
   100% {
   	stroke-dashoffset: 0;
   }
}

   	
   	</style>

oder:

Spoiler

<svg width="600" height="510" >
   	
   <defs>    
   <linearGradient id='MyGradientFull' x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset='0%' stop-color='red' />
     <stop offset='100%' stop-color=' lightblue' />
   </linearGradient>
    </defs>
      
    <g transform="scale(1)" >
    
    
       <g  >
   	
   	
   	
                                         
        <path  class="loadingFull" d="M200,50  L200,95  
                                       A28,28 0 0,1 180,120
                                       A10,10 0 0,0 180,180 
                                       A10,10 0 0,0 180,180 l280 0
                                       A10,10 0 1,1 460,240 l-280 0
                                       A10,10 0 0,0 180,300 l280 0
                                       A10,10 0 1,1 460,360 l-320 0
   									
                                       "
            fill= "none" stroke-width="8" stroke-dasharray="15 5" 	
            stroke="url(#MyGradientFull)"								 
                                       />
         <path class="loadingFull" d="M140,360 A28,28 0 0,1 110,330 l0 -280
           " fill= "none" stroke-width="8" stroke-dasharray="15 5" stroke="lightblue"               
             
           /> 
                                     
       </g>
       
       <g>
         
 
   								  
   									  
   									  
     
   </g>   
   </g> </svg>

   	<style>
   	
   	.loadingFull {
    animation: strokeFull .7s infinite linear;
    }

@keyframes strokeFull {
   0% {
   	stroke-dashoffset: -40;
   }
   100% {
   	stroke-dashoffset: 0;
   }
   }
  </style>	
   	
   	

können beide verkleinert werden

[mguenther]

@liv-in-sky

boah - ich werd bekloppt... Ich war unterwegs und wollte mich jetzt damit auseinandersetzen.
Danke dir - wie immer. Ich schau es mir an und arbeite mich rein...

[liv-in-sky]

@mguenther

diese A commands sind ein "gefriggel" :-)

[mguenther]

@liv-in-sky
"Gefriggel hinbekommen... hab nur ein Problem... Der Farbverlauf passt nicht. Der Verlauf ist quasi über das gesamte Bild von oben nach unten bzw. links nach rechts. Daher hast du ja auch beim 2. Bild links die Linie ergänzt.

Meine Koordinaten wären eigentlich so gewesen:

<path class="loading1011" d="
M 380 215
L 180 215
L 10 15 
A 2.0 1 0 1 1 25 10
L 200 180
A 2.0 1 0 0 0 260 170
L 50 15
A 2.0 1 0 1 1 70 10
L 365 200
L380 200
"/>

Dann passiert aber folgendes:

Da noch ne Idee, wie in der Linie der Farbverlauf erfolgt? Außer dass ich meine Geometrie um 90° drehen müsste...

[liv-in-sky]

@mguenther

da müßte eigentlich der farbverlauf von links nach rechts laufen - evtl musst du mehrere pfade machen - der untere quere"strang" müßte dann ein eigenständer pfad (in blau) sein - oder ?

[liv-in-sky]

@mguenther

hier z.b. ein vertikaler verlauf https://www.w3schools.com/graphics/svg_grad_linear.asp

[mguenther]

@liv-in-sky
so sieht es aktuell aus (unten müsste rot sein)

Dein Link mit dem Farbverlauf schau ich mir mal an. Problem ist - es ist ja nicht ein reiner Verlauf von rechts nach links oder von oben nach unten - ich muss mir das mal anschauen...

[liv-in-sky]

@mguenther habe ich verstanden - da muss ich erstmal nachsehen, was mit den linear grdienten machbar ist denke das könnte damit gehen https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients#center_and_focal_point

[mguenther]

@liv-in-sky
ah, super - über den ersten Link mit dem gradient Angaben in Prozent lässt es sich nicht darstellen. Zumindest komme ich nach kurzem Nachdenken nicht drauf. Wenn du bei deinem 2. Link was findest - wäre spitze. Ich schau mir das auch an.

Alternativ schau ich mir mal an, ob ich noch die Form etwas anders darstellen kann. Dann könnte es auch mit den Prozentangaben klappen...

[liv-in-sky]

@mguenther

evtl mit dieser seite: http://thenewcode.com/1155/Understanding-Linear-SVG-Gradients gleich das bild mit dem blau gelb - wenn man das irgendwie hindreht - und einen extra pfad für die untere linie macht - werd heute nicht mehr viel zeit haben - eher nächste woche mal

[mguenther]

@liv-in-sky
danke dir - aber das ist doch der gleiche Ansatz - oder?

A diagonal gradient will therefore be created by setting y2 to a value of 100%:

<linearGradient id="testbed4" y2="100%">
    <stop stop-color="yellow" offset="0" />
    <stop stop-color="blue" offset="0.5" />
    <stop stop-color="black" offset="1" />
</linearGradient>
Note that this does not create a 45° gradient, as the values are relative to the dimensions of the element