SVG animation vivus

[Matthias Scharwies]

Servus!

Hallo Matthias,

Die Pfade haben eine Randlinie (stroke), die mit stroke-dasharray gestrichelt und mit stroke-dashoffset verschoben und damit animiert werden können.

• SVG/Tutorials/Einstieg/SVG mit CSS animieren#Laufende_Linien

Deine Grafik hat keine Festlegungen also nimmt der Pfad als Füllung den Standardwert schwarz und als Randlinie eben keine. Deshalb kann auch kein Rand gezeichnet werden.

puhhh, das scheint wohl eine Kunst für sich zu sein. Muss ich mich wohl doch erst mal einlesen.

<?xml version="1.0" encoding="UTF-8"?>
<svg  version="1.1" viewBox="0 0 2000.0001 1999.9999" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(610.95 633.82)">
  <path d="m279.9 1360.4c-295.99-33.278-561.51-196.34-726. 
fill="none" stroke="blACK" stroke-width="15"/>
 </g>
</svg>

Du scheinst ja fit darin zu sein. Wie hast du das so schnell umsetzen können? Wenn ich mir den Quelltext von svg-Dateien anschaue und vor allem die Pfade, dann verstehe ich leider (noch) gar nichts, ausser dem rudimentären.

Ich habe nur diese XML-Attribute fill="none" stroke="blACK" stroke-width="15"eingefügt. Hätte man auch als CSS machen können.

Das ist wie HTML, wirklich! Lies Dir mal das durch:

SVG/Tutorials/Einstieg

Mich hat bei dem Vivus-Bild mehr das doppelte style-Element, dessen CSS-Regelsätze ohne Leerzeichen und Zeilenumbrüche waren und dass vom Seiteninspektor grau dargestellt wurde, irritiert.

Et voilà:

Zwar noch keine sauberen Linien aber dafür unglaublich schnell umgesetzt.

Das ist genau das Problem. SVG entwickelt seine volle Stärke, wenn man die Grafiken mit Grundformen darstellt. Hier würde ich das Muster neu zeichnen:

• ein Pfad mit einem Kreisbogen und einem Deko-Haken,
• dann das ganze immer wieder mit use aufrufen, passend rotiert und verschoben. Mach ich in den nächsten Tagen mal fertig.

Auch das Yin-Yang ist falsch gezeichnet:

 <g transform="translate(0 -452.36)">
  <path d="m398.55 990.11c-67.554-0.7325-122.38-53.697-122.38-118.96s54.826-118.22 122.38-118.49 122.38-53.233 122.38-118.49-54.826-118.22-122.38-119.55c-130.44-1.3228-236.3 105.48-236.3 237.08s105.86 238.41 236.3 238.41z" fill="url(#a)" stroke="#000" stroke-width="7.6545"/>
  <path d="m401.45 514.61c67.554 0.7325 122.38 53.697 122.38 118.96s-54.826 118.22-122.38 118.49-122.38 53.233-122.38 118.49 54.826 118.22 122.38 119.55c130.44 1.3228 236.3-105.48 236.3-237.08s-105.86-238.41-236.3-238.41z" fill="url(#b)" stroke="#000" stroke-width="7.6545"/>
  <g opacity=".828">
   <path transform="matrix(3.5504 0 0 3.4298 874.43 -125.71)" d="m-125.81 288.98a7.6383 7.6383 0 1 1 -15.277 0 7.6383 7.6383 0 1 1 15.277 0z"/>
   <path transform="matrix(3.5504 0 0 3.4298 874.43 -365.71)" d="m-125.81 288.98a7.6383 7.6383 0 1 1 -15.277 0 7.6383 7.6383 0 1 1 15.277 0z" fill="#fff"/>
  </g>
 </g>

Hier eine bessere Variante (auf Wikimedia gefunden)

  <circle r="39"/>
  <path d="M0,38 
           a38,38 0 0 1 0,-76 
           a19,19 0 0 1 0,38 
           a19,19 0 0 0 0,38" 
        fill="#fff" />
  <circle r="5" cy="19" fill="#fff"/>
  <circle r="5" cy="-19"/>

Drei Kreise und ein Pfad. Dieser setzt den Stift bei M0,38 auf und zeichnet drei Kreisbögen mit dem a-Command:

1. weniger Markup
2. saubere Kurven
3. Mit CSS stylebar (Randlinie, Stärke, Farbe, Strichelung)

Danke für die Infos.

Gruss
Henry

Herzliche Grüße

Matthias Scharwies