Heim >Web-Frontend >H5-Tutorial >Verwenden Sie HTML5 SVG, um verschiedene Schneeflockenmuster zu zeichnen

Verwenden Sie HTML5 SVG, um verschiedene Schneeflockenmuster zu zeichnen

青灯夜游Original: 2021-08-31 13:19:082919Durchsuche

Im vorherigen Artikel haben wir die Methode zur Verwendung von HTML5+CSS3 zum dynamischen Zeichnen eines Smileys vorgestellt. Wenn Sie interessiert sind, können Sie auf den Link klicken, um zu lesen → „So verwenden Sie HTML5+CSS3 zum dynamischen Zeichnen eines lächelnden Gesichts ". Dieses Mal sprechen wir weiterhin über die Verwendung von HTML5 SVG zum Zeichnen von Mustern.

Der Hauptinhalt des heutigen Artikels ist: Verwenden von HTML5-SVG zum Zeichnen verschiedener Schneeflockenmuster.

Lassen Sie uns zunächst verstehen, was SVG ist.

SVG ist die Abkürzung für Scalable Vector Graphics. Es handelt sich um ein Grafikformat, bei dem Formen in XML angegeben werden. Das XML wird dann vom SVG-Viewer gerendert. Heutzutage können die meisten Webbrowser SVG genauso anzeigen wie PNG, GIF und JPG. SVG wird für zweidimensionale Vektorgrafiken verwendet.

SVG-Bilder werden mit verschiedenen Elementen erstellt, die auf die Struktur, Zeichnung und das Layout von Vektorbildern angewendet werden. Wenn SVG nicht das Stammelement ist, kann das SVG-Element verwendet werden, um ein separates SVG-Fragment innerhalb des aktuellen Dokuments (z. B. eines HTML-Dokuments) zu verschachteln. Dieses unabhängige Fragment verfügt über ein eigenes Ansichtsfenster und ein eigenes Koordinatensystem.

Sehen wir uns an, wie man mit HTML5 SVG verschiedene Schneeflockenmuster zeichnet.

Legen Sie zunächst die Hintergrundfarbe der gesamten Seite, die Größe der SVG-Leinwand, die Farbe der Linien usw. fest.

body {
  background: #222;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
svg {
  width: 25vmin;
  height: 25vmin;
}
.stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Dann beginnen Sie mit der Verwendung von SVG, um verschiedene Schneeflockenmuster zu zeichnen Erstellen Sie das Stammelement des SVG-Bildes, verschachteln Sie ein unabhängiges SVG-Fragment im aktuellen Dokument und zeichnen Sie dann mit mehreren -Tags den Musterpfad. Das erste Schneeflockenmuster Je komplexer das Muster ist, desto mehr Je mehr Tags

Das zweite Schneeflockenmuster

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(315)"></path>
</svg>

Das dritte Schneeflockenmuster Verwenden Sie HTML5 SVG, um verschiedene Schneeflockenmuster zu zeichnen