Vorher haben wir uns darauf konzentriert, verschiedene Formen, Texte und Bilder zusammenzufassen. Als nächstes werden wir die Farbverarbeitung, dh die Füll- und Randeffekte, zusammenfassen, während wir Leinwand diskutieren. Sie werden feststellen, dass der Inhalt hier im Grunde genommen mit Leinwand entspricht. Diese Eigenschaften können in Elementen als Attribute geschrieben oder in CSS gespeichert werden (dies unterscheidet sich von Leinwand).
Farbe füllen - Attribut füllen Diese Eigenschaft verwendet die festgelegte Farbe, um das Innere der Abbildung zu füllen. Es ist sehr einfach zu bedienen. Weisen Sie dieser Eigenschaft einfach den Farbwert direkt zu. Siehe Beispiel:<rect x = "10" y = "10" Stroke = "Blue" fill = "rot"
FILL-OPACITY = "0,5" Schlaganfalloptazität = "0,8"/>
Im obigen Beispiel wird ein rotes und blaues Rechteck gezeichnet. Ein paar Punkte zu beachten:
1. Wenn das Füllattribut nicht bereitgestellt wird, wird die schwarze Füllung standardmäßig verwendet. Wenn Sie die Füllung stornieren möchten, müssen Sie sie auf keine setzen.
2. Sie können die Transparenz der Füllung einstellen, dh , und der Wertbereich beträgt 0 bis 1.
3. Ein etwas komplizierteres ist das Fill-Rule- Attribut. Diese Eigenschaft definiert einen Algorithmus, der feststellt, ob der Punkt zum Füllbereich gehört. Zusätzlich zum Erben gibt es zwei Werte:
ungleich Null : Der für diesen Wert verwendete Algorithmus besteht darin, Linien aus dem Punkt zu emittieren, der in jede Richtung gerichtet werden muss, und dann die Richtung des Schnittpunkts zwischen der Abbildung und dem Liniensegment zu berechnen; Das Berechnungsergebnis beginnt von 0, und jedes Zeilensegment an einer Kreuzung ist von links nach rechts, fügen Sie 1 hinzu; Jedes Liniensegment an einer Kreuzung ist von rechts nach links, Subtrahieren 1; Nach der Berechnung aller Schnittpunkte auf diese Weise liegt der Punkt in der Abbildung und muss gefüllt werden, wenn das Ergebnis dieser Berechnung nicht gleich 0 ist. Wenn der Wert gleich 0 ist, muss er außerhalb der Abbildung nicht gefüllt werden. Siehe folgendes Beispiel: Evendd : Der für diesen Wert verwendete Algorithmus besteht darin, Linien aus dem Punkt zu emittieren, der an eine beliebige Richtung beurteilt werden muss, und dann die Anzahl der Punkte zu berechnen, an denen sich die Abbildung und das Liniensegment überschneiden. Wenn die Zahl ungerade ist, wird der Punkt in die Figur geändert und muss gefüllt werden. Wenn die Zahl gleichmäßig ist, liegt der Punkt außerhalb der Abbildung und muss nicht gefüllt werden. Siehe das Beispiel in der Abbildung unten: Randfarbe - Schlaganfallattribut Das obige Beispiel hat das Schlaganfallattribut verwendet. Dieses Attribut verwendet den festgelegten Wert, um den Rand der Abbildung zu zeichnen, die ebenfalls sehr direkt verwendet werden kann. Weisen Sie ihm einfach den Farbwert zu. Beachten:1. Wenn das Schlaganfallattribut nicht bereitgestellt wird, wird der Graph -Rand standardmäßig nicht gezeichnet.
2. Sie können die Transparenz der Kante einstellen, die Schlaganfalloptivität ist, und der Wertebereich beträgt 0 bis 1.
Tatsächlich ist die Situation der Kanten etwas komplizierter als das Innere des Diagramms, da die Kanten zusätzlich zu Farbe auch Formen haben, die definiert werden müssen.
Endpunkt der Linie - Schlaganfall -Linie -Eigenschaft
Diese Eigenschaft definiert den Stil des Endpunkts des Liniensegments. Diese Eigenschaft kann drei Werte verwenden , quadratisch und rund . Siehe Beispiel:<Svg>
<Zeile x1 = "40" x2 = "120" y1 = "20" y2 = "20" Stroke = "Black" Stroke-Width = "20" STREKE-LineCap = "Butt"/>
<Zeile x1 = "40" x2 = "120" y1 = "60" y2 = "60" STROKE = "Black" Strich-Width = "20" Stroke-LineCap = "Square"/>
<Zeile x1 = "40" x2 = "120" y1 = "100" y2 = "100" STROKE = "Black" Strich-Width = "20" Stroke-LineCap = "Round"/>
</svg>
Dieser Code zeichnet 3 Zeilen mit verschiedenen Arten von Zeilenendpunkten.
Aus dem Bild links können wir den Stilunterschied in 3 leicht erkennen.
Zeilenverbindung - Stroke -Linejoin -Attribut Diese Eigenschaft definiert den Stil bei der Verbindung von Liniensegmenten. Diese Eigenschaft kann die drei Werte von Gehrung, Runden und Abschrägung verwenden. Siehe Beispiel:<Svg>
<Polyline-Punkte = "40 60 80 20 120 60" Stroke = "Black" Strich-Width = "20"
stroke-linecap = "butt" fill = "transparent" stroke-linejoin = "Mitre"/>
<Polyline-Punkte = "40 140 80 100 120 140" Stroke = "Black" Strich-Width = "20"
Stroke-LineCap = "Round" fill = "transparent" Stroke-linejoin = "Round"/>
<Polyline-Punkte = "40 220 80 180 120 220" Stroke = "Black" Strich-Width = "20"
Stroke-LineCap = "Square" fill = "transparent" Stroke-linejoin = "Bevel"/>
</svg>
Aus dem Bild links können wir den Stilunterschied in 3 leicht erkennen.
Die virtuelle und reale Linie - Stroke -Dasscharray -Attribut
Diese Eigenschaft kann die virtuellen und realen Linien des Liniensegments festlegen. Siehe Beispiel:<Svg>
<Pfad d = "M 10 75 q 50 10 100 75 T 190 75" Stroke = "Schwarz"
STRECE-LineCap = "Round" Stroke-Casharray = "5,10,5" fill = "Keine"/>
<Pfad D = "M 10 75 L 190 75" Stroke = "Rot"
Stroke-Linecap = "runde" Strich-Width = "1" Stroke-Das-Das-Entschuld = "5,5" FILL = "NONE"/>
</svg>
Diese Eigenschaft legt einige Zahlenspalten fest, diese Nummern müssen jedoch von Comma getrennt sein.
Natürlich können Leerzeichen in das Attribut aufgenommen werden, Räume werden jedoch nicht als Grenzwerte verwendet. Jede Zahl
Die Länge des durchgezogenen Liniensegments ist definiert und in der Reihenfolge der Zeichnung und nicht des Zeichnens gefahren.
Die im Beispiel links gezogene Linie ist also eine durchgezogene Linie mit 5 Einheiten, die Räume mit 5 Einheiten hinterlässt.
Zeichnen Sie 5 Einheiten mit soliden Linien ... und fahren Sie so fort.
Zusätzlich zu diesen häufig verwendeten Eigenschaften können die folgenden Eigenschaften festgelegt werden:
Schlaganfall-Meterlimit : Dies ist das gleiche wie in Leinwand, das den Gehrungseffekt an der Verbindung zwischen wann und ob die Linie gezogen wird. Stroke-Dasoffset : Diese Eigenschaft legt die Position fest, an der die gepunktete Linie gezogen wird. Verwenden Sie CSS, um Daten anzuzeigen HTML5 stärkt die Idee von Div+CSS, so dass der Teil, der die Daten anzeigt, auch CSS zur Verarbeitung übergeben werden kann. Im Vergleich zu gewöhnlichen HTML-Elementen ist es nur Hintergrundfarbe und Grenze, die durch Füllung und Schlaganfall ersetzt werden. Die meisten anderen sind ähnlich. Nehmen wir ein kurzes Beispiel:#Myrect: Hover {
Schlaganfall: Schwarz;
Füllung: Blau;
}
Ist es nicht sehr vertraut? Es ist so einfach.
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/
Offizielles Dokument: http://www.w3.org/tr/svg11/