HTML5 SVG 2D Einführung 4 – Strich- und Füllfunktionen_html5-Tutorial-Fähigkeiten

Zuvor haben wir uns auf die Zusammenfassung verschiedener Formen, Texte und Bilder konzentriert. Als nächstes werden wir die Farbverarbeitung, also die Füll- und Randeffekte, zusammenfassen. Sie werden feststellen, dass der Inhalt hier im Wesentlichen derselbe ist wie die von Leinwand. Diese Attribute können als Attribute in das Element geschrieben oder in CSS gespeichert werden (dies unterscheidet sich von Canvas).
Füllfarbe – Füllattribut
Dieses Attribut verwendet die eingestellte Farbe, um das Innere der Grafik zu füllen. Weisen Sie einfach den Farbwert zu dieses Attribut direkt. Schauen Sie sich das Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

fill-opacity="0.5" Stroke-opacity="0.8" />

Im obigen Beispiel wird ein Rechteck mit roten und blauen Kanten gezeichnet. Beachten Sie einige Punkte:
1. Wenn das Attribut fill nicht angegeben ist, wird standardmäßig die schwarze Füllung verwendet. Wenn Sie die Füllung abbrechen möchten, müssen Sie es auf „Keine“ setzen.
2. Sie können die Fülltransparenz einstellen, die Füllopazität ist.
3. Etwas komplizierter ist das Attribut fill-rule. Dieses Attribut definiert den Algorithmus zur Beurteilung, ob ein Punkt zum Füllbereich gehört. Zusätzlich zum Wert erben gibt es zwei Werte: ungleich Null: Der für diesen Wert verwendete Algorithmus lautet: Starten Sie eine Linie vom zu bestimmenden Punkt in eine beliebige Richtung und berechnen Sie dann die Schnittrichtung des Diagramms und des Liniensegments Das Ergebnis beginnt bei 0 und an jedem Schnittpunkt. Wenn das Liniensegment von links nach rechts verläuft, addieren Sie 1 für jeden Schnittpunkt, an dem das Liniensegment von rechts nach links verläuft, und verringern Sie 1, nachdem alle Schnittpunkte berechnet wurden Das Ergebnis dieser Berechnung ist ungleich 0. Wenn der Punkt innerhalb der Grafik liegt, muss er ausgefüllt werden. Wenn der Wert gleich 0 ist, liegt er außerhalb der Grafik und muss nicht ausgefüllt werden. Schauen Sie sich das Beispiel unten an:

evenodd: Der für diesen Wert verwendete Algorithmus ist: Starten Sie eine Linie vom zu bestimmenden Punkt in eine beliebige Richtung und berechnen Sie dann die Anzahl der Schnittpunkte zwischen dem Diagramm und dem Liniensegment ist eine ungerade Zahl, ändern Sie den Punkt innerhalb des Diagramms. Wenn die Zahl eine gerade Zahl ist, liegen die Punkte außerhalb der Grafik und müssen nicht gefüllt werden. Schauen Sie sich das Beispiel unten an:

Rahmenfarbe – Strichattribut
Das Strichattribut wurde im obigen Beispiel verwendet. Dieses Attribut verwendet den eingestellten Wert, um den Rand der Grafik zu zeichnen auch sehr einfach zu verwenden. Weisen Sie ihm einfach den Farbwert zu. Hinweis:
1. Wenn das Attribut Strich nicht angegeben ist, wird der Grafikrand standardmäßig nicht gezeichnet.
2. Sie können die Transparenz der Kante einstellen, die Strichopazität ist.
Tatsächlich ist die Kantensituation etwas komplizierter als innerhalb des Diagramms, da die Kante neben der Farbe auch eine „Form“ hat, die definiert werden muss.

Endpunkt der Linie – Stroke-Linecap-Attribut
Dieses Attribut definiert den Stil des Endpunkts des Liniensegments. Dieses Attribut kann verwenden stumpf, quadratisch, rund Drei Werte. Schauen Sie sich das Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

Dieser Code zeichnet 3 Linien mit unterschiedlichen Linienendpunkten,

Auf dem Bild links können wir die Unterschiede zwischen den drei Stilen leicht erkennen.

Linienverbindung – Strich-Linienverbindungs-Attribut
Dieses Attribut definiert den Stil der Liniensegmentverbindung. Dieses Attribut kann drei Werte Gehrung, Rund, Abschrägung verwenden . Schauen Sie sich das Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

Stroke-Linecap="Butt" Fill="Transparent" Stroke-Linejoin="Miter"/> width="20"
Stroke-linecap="round" fill="transparent" Stroke-linejoin="round"/>

Stroke-linecap="square" fill="transparent" Stroke-linejoin="bevel"/>

Auf dem Bild links können wir den Unterschied zwischen den drei Stilen leicht erkennen.

Die virtuelle und durchgezogene Linie – Stroke-Dasharray-Attribut
Mit diesem Attribut kann die virtuelle und durchgezogene Linie festgelegt werden, die für das Liniensegment verwendet wird. Schauen Sie sich das Beispiel an:

Kopieren Sie den CodeDer Code lautet wie folgt:

Stroke-linecap="round " Stroke-Dasharray=" 5,10,5" Fill="none"/>
Stroke-linecap="round " Stroke-width=" 1" Stroke-dasharray="5,5" fill="none"/>

Dieses Attribut legt eine Reihe von Zahlen fest, diese Zahlen müssen jedoch durch Kommas getrennt werden.

Attribute können natürlich Leerzeichen enthalten, Leerzeichen dienen jedoch nicht als Trennzeichen. Jede Zahl

definiert die Länge des durchgezogenen Liniensegments, das in der Reihenfolge des Zeichnens und Nicht-Zeichnens durchlaufen wird.

Die im Beispiel links gezeichnete Linie ist also eine durchgezogene Linie von 5 Einheiten, so dass 5 Einheiten Platz übrig bleiben,

Zeichnen Sie weitere 5 Einheiten einer durchgezogenen Linie ... und fahren Sie so fort.

Zusätzlich zu diesen häufig verwendeten Attributen können auch die folgenden Attribute festgelegt werden:

Stroke-Miterlimit
: Dies ist das Gleiche wie in Canvas. Es behandelt den Gehrungseffekt am Zusammenhang zwischen dem Zeichnen und Nichtzeichnen von Linien. Stroke-Dashoffset
: Dieses Attribut legt die Position fest, an der mit dem Zeichnen der gestrichelten Linie begonnen wird.

Verwenden Sie CSS zum Anzeigen von Daten

HTML5 stärkt die Idee von DIV CSS, sodass der Datenanzeigeteil auch CSS überlassen werden kann. Im Vergleich zu gewöhnlichen HTML-Elementen werden lediglich Hintergrundfarbe und Rahmen durch Füllung und Strich ersetzt. Die meisten anderen sind ziemlich gleich. Nehmen wir ein einfaches Beispiel:

Kopieren Sie den CodeDer Code lautet wie folgt:

#MyRect:hover {

Strich: schwarz;
Füllung: blau;
}


Kommt das nicht bekannt? So einfach ist das.

Praktische Referenz:

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Entwicklungszentrum: https://developer.mozilla.org/en/SVG
Beliebte Referenz: http://www.chinasvg.com/
Offizielle Dokumentation: http://www.w3.org/TR/SVG11/