Matthias Scharwies: Flaggen - Rätsel (SVG-Tutorial)

Servus!

Nach der Kritik an Flaggen im Wiki ein kleines Rätsel für Euch:

Wie viel gerade Linien benötigt ihr, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

4

5

10

11

Die Lösung findet Ihr im neuen SVG-Einstiegstutorial: Flaggen mit SVG zeichnen

Hoffentlich findet es die geneigte Zustimmung der Götter.

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
  1. Hallo Matthias Scharwies,

    Wie viel gerade Linien benötigt ihr, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

    Wenn die Füllfarbe eine andere als die der Umrandung sein soll, dann sind es mehr.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Servus!

      Hallo Matthias Scharwies,

      Wie viel gerade Linien benötigt ihr, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

      Wenn die Füllfarbe eine andere als die der Umrandung sein soll, dann sind es mehr.

      1. Welche Flagge tut so was haben?

      2. Dann könnte man den Pfad mit z schließen.

      Bis demnächst
      Matthias

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. Hallo Matthias Scharwies,

        1. Welche Flagge tut so was haben?

        Neuseeland.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      2. Lieber Matthias,

        1. Welche Flagge tut so was haben?

        die der EU.

        Liebe Grüße,

        Felix Riesterer.

        1. Hi,

          1. Welche Flagge tut so was haben?

          die der EU.

          Nein, die Sterne der Europaflagge sind einfarbig, die haben keinen andersfarbigen Rand.

          cu,
          Andreas a/k/a MudGuard

          1. Servus!

            Hi,

            1. Welche Flagge tut so was haben?

            Neuseeland

            Die passt ganz gut, weil die Sterne unterschiedlich groß sind, für das 8. BSP. Symbol mit transform="scale*()" oder viewport.

            Herzliche Grüße

            Matthias Scharwies

            --
            Es gibt viel zu tun: ToDo-Liste
      3. Servus!

        Wie viel gerade Linien benötigt ihr, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

        Wenn die Füllfarbe eine andere als die der Umrandung sein soll, dann sind es mehr.

        1. Dann könnte man den Pfad mit z schließen.

        Ich habe von euren Mathe-Rätseln wenig Ahnung und auch hier wieder falsch gelegen. Bei einer andersfarbigen Umrandung würden 5 Linien den Stern durchschneiden. Für die Umrandung benötigt man 9 Linien und ein z für das Schließen der Form.

        Siehe hier: Neuseeland: Stern mit Umrandung in mehreren Größen aufrufen

        So jetzt ist das Einstiegs-Tutorial aber erstmal komplett, oder gibt es noch etwas, das ich vergessen habe?

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. Hallo Matthias Scharwies,

          Ich habe von euren Mathe-Rätseln wenig Ahnung und auch hier wieder falsch gelegen.

          Das ist keine Schande.

          Siehe hier: Neuseeland: Stern mit Umrandung in mehreren Größen aufrufen

          Wenn man das Beispiel direkt aufruft, ist der union jack abgerundet, die Flagge Neuseelands aber nicht. Auch sind bei den letzten beiden die Proportionen anders, falls das gewollt und richtig ist, habe ich nichts gesagt.

          Ich würde vielleicht bei den Beispielen selbst (nicht in der Erläuterung!) noch Beschriftungen anbringen.

          So jetzt ist das Einstiegs-Tutorial aber erstmal komplett, oder gibt es noch etwas, das ich vergessen habe?

          Danke für deine unermüdliche Arbeit.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          1. Servus!

            Wenn man das Beispiel direkt aufruft, ist der union jack abgerundet, die Flagge Neuseelands aber nicht.

            Unbewusst ist mir das auch schon aufgefallen, habe es aber auf den border-radius von svg-geschoben, was Blödsinn ist. Muss ich mal nachforschen.

            Auch sind bei den letzten beiden die Proportionen anders, falls das gewollt und richtig ist, habe ich nichts gesagt.

            Ja, der Union Jack hat 1:2 und folglich auch die NZ-flag. Bei 400px Breite ist sie untereinander, ich werde sie auf 300: 150 runterskalieren.

            Ich würde vielleicht bei den Beispielen selbst (nicht in der Erläuterung!) noch Beschriftungen anbringen.

            Das mit dem figure äußerte sich in einer ziemlichen Einrückung aller Kind-Elemente im Frickl, sodass die rect und path-Elemente alle auf mehrere Zeilen verteilt waren.

            Ich überleg mir was.

            Bis demnächst
            Matthias

            Herzliche Grüße

            Matthias Scharwies

            --
            Es gibt viel zu tun: ToDo-Liste
            1. Hallo Matthias Scharwies,

              Das mit dem figure äußerte sich in einer ziemlichen Einrückung aller Kind-Elemente im Frickl, sodass die rect und path-Elemente alle auf mehrere Zeilen verteilt waren.

              Ich überleg mir was.

              Ne Überschrift?

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. Hallo

          Ich habe von euren Mathe-Rätseln wenig Ahnung und auch hier wieder falsch gelegen.

          Die Fragestellung mit der Lösung ist auch vollkommen unsinnig.

          Nach der dahinterliegenden "Logik" wäre überhaupt keine Linie sondern nur die Füllung erforderlich.

          Das eine nicht geschlossene Form so wie bei der "Lösung" gefüllt wird ist auch eine typische SVG-Eigenschaft, die bei den meisten anderen Grafikprogrammen so überhaupt nicht funktioniert. Mit der realen Welt oder Mathematik hat die Frage nicht mal ansatzweise zu tun.

          Es handelt sich bei der Frage also um kein Rätsel, schon gar kein logisches.

          Gruss

          MrMurphy

          1. Servus!

            Wie viel gerade Linien benötigt ihr, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

            Die Fragestellung mit der Lösung ist auch vollkommen unsinnig.

            Nach der dahinterliegenden "Logik" wäre überhaupt keine Linie sondern nur die Füllung erforderlich.

            Wie kannst Du einen Stern zeichnen, indem du nur die Füllung, aber nicht die Kontur oder Ränder festlegst?

            Das eine nicht geschlossene Form so wie bei der "Lösung" gefüllt wird ist auch eine typische SVG-Eigenschaft, die bei den meisten anderen Grafikprogrammen so überhaupt nicht funktioniert.

            Zugegeben, die Form wird erst mit der Füllung sichtbar - aber so daneben fand ich die Frage dann doch wieder nicht.

            Mit der realen Welt oder Mathematik hat die Frage nicht mal ansatzweise zu tun.

            Es handelt sich bei der Frage also um kein Rätsel, schon gar kein logisches.

            Herzliche Grüße

            Matthias Scharwies

            --
            Es gibt viel zu tun: ToDo-Liste
            1. Hallo,

              Wie viel gerade Linien benötigt ihr, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

              Die Fragestellung mit der Lösung ist auch vollkommen unsinnig.

              Nach der dahinterliegenden "Logik" wäre überhaupt keine Linie sondern nur die Füllung erforderlich.

              Wie kannst Du einen Stern zeichnen, indem du nur die Füllung, aber nicht die Kontur oder Ränder festlegst?

              das kommt auf die Betrachtungsweise an. Wenn man es mathematisch-geometrisch angeht (und das tut man mit SVG zwangsläufig), ist die Kontur natürlich Veraussetzung, und sei sie auch unsichtbar, z.B. weil die Linienfarbe transparent oder die Linienstärke 0 ist.

              Aber denk mal an den Graffiti-Sprayer an der Mauer: Er könnte natürlich die Kontur eines Motivs, das er darstellen will, zunächst mit Krepp-Band abkleben, um eine scharfe, glatte Kontur zu haben. Das macht er aber nicht; stattdessen sprüht er sozusagen direkt die Füllfarbe, ohne dass er die Randlinie braucht.

              Das eine nicht geschlossene Form so wie bei der "Lösung" gefüllt wird ist auch eine typische SVG-Eigenschaft, die bei den meisten anderen Grafikprogrammen so überhaupt nicht funktioniert.

              Mit pixelbasierten Grafikprogrammen nicht; mit vektorbasierten meistens schon.

              Zugegeben, die Form wird erst mit der Füllung sichtbar - aber so daneben fand ich die Frage dann doch wieder nicht.

              Wird sie? Unsere Auge-Hirn-Kombination leistet Erstaunliches. Wir erkennen oft auch Formen, bei denen eine Linie fehlt (oder sogar mehrere), weil wir sie beim Anschauen unbewusst ergänzen.

              So long,
               Martin

              --
              Ein Pärchen kommt aus dem Planetarium. Fragt die Blondine ihren Partner: "Dieser Vortrag über die Entfernung der Sterne war ja sehr spannend. Aber ich habe immer noch nicht verstanden, wie man sie wirklich entfernt."
        3. @@Matthias Scharwies

          Siehe hier: Neuseeland: Stern mit Umrandung in mehreren Größen aufrufen

          Siehe hier: Dein Union Jack ist falsch

          LLAP 🖖

          --
          “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
  2. Hi,

    Wie viel gerade Linien benötigt ihr, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

    5, auch wenn die 5. Linie im svg nicht explizit angegeben wird, sondern vom Füll-Mechanismus automatisch erzeugt wird.

    Die Lösung findet Ihr im neuen SVG-Einstiegstutorial: Flaggen mit SVG zeichnen

    Soweit ich weiß, können bei svg-Pfaden die "Kommandos" auch in Großbuchstaben angegeben werden. Das hätte dann den Vorteil, daß sich das L wie Linie besser von den folgenden Ziffern abhebt.

    Fänd ich grad im Tutorial besser.

    cu,
    Andreas a/k/a MudGuard

    1. Servus!

      Soweit ich weiß, können bei svg-Pfaden die "Kommandos" auch in Großbuchstaben angegeben werden.

      Das sind dann absolute vom Ursprung ausgehende Pfadbefehle.

      Das hätte dann den Vorteil, daß sich das L wie Linie besser von den folgenden Ziffern abhebt.

      und funktioniert deshalb hier nicht.

      Fänd ich grad im Tutorial besser.

      cu,
      Andreas a/k/a MudGuard

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. Hi,

        Soweit ich weiß, können bei svg-Pfaden die "Kommandos" auch in Großbuchstaben angegeben werden.

        Das sind dann absolute vom Ursprung ausgehende Pfadbefehle.

        ok, wußte ich nicht.

        und funktioniert deshalb hier nicht.

        das ist klar, wenn l und L nicht dasselbe bedeuten.

        cu,
        Andreas a/k/a MudGuard

    2. @@MudGuard

      Soweit ich weiß, können bei svg-Pfaden die "Kommandos" auch in Großbuchstaben angegeben werden.

      Nein. L ist was anderes als l.

      Bsp.: M1 2 L3 4 zieht eine Linie von (1, 2) zu (3, 4).

      M1 2 l3 4 hingegen zieht eine Linie von (1, 2) zu (4, 6) – vom aktuellen Ort der „Schildkröte“ 3 in x-; 4 in y-Richtung.

      Das hätte dann den Vorteil, daß sich das L wie Linie besser von den folgenden Ziffern abhebt.

      Wer I, l und 1 nicht unterscheiden kann, sollte eine andere Schriftart wählen bzw. den Autor darauf hinweisen dies zu tun.

      LLAP 🖖

      --
      “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
      1. @@Gunnar Bittersmann

        Wer I, l und 1 nicht unterscheiden kann, sollte eine andere Schriftart wählen bzw. den Autor darauf hinweisen dies zu tun.

        Das trifft auch auf die hier im Forum verwendete Consolas zu. Es sollte in Erwägung gezogen werden, diese durch eine für Code brauchbare Schrift zu ersetzen.

        LLAP 🖖

        --
        “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
        1. Hej Gunnar,

          @@Gunnar Bittersmann Es sollte in Erwägung gezogen werden, [Consolas] durch eine für Code brauchbare Schrift zu ersetzen.

          Vorschlag? 0 und O sollten auch unterscheidbar bleiben.

          Marc

        2. Hallo Gunnar,

          Wer I, l und 1 nicht unterscheiden kann, sollte eine andere Schriftart wählen bzw. den Autor darauf hinweisen dies zu tun.

          Das trifft auch auf die hier im Forum verwendete Consolas zu.

          Nein.

          Es sollte in Erwägung gezogen werden, diese durch eine für Code brauchbare Schrift zu ersetzen.

          Das ist der Fall.

          Alternativ-Text

          LG,
          CK

          1. Hallo Christian Kruse,

            Das ist der Fall.

            auch unter Windows. Grenzwertig zwar, aber unterscheidbar. Vor allem ist das l nicht ganz so hübsch.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.