SVG fill-Eigenschaft

Die Füllung der SVG-Formen definiert die Farbe innerhalb des Konturs. Mit anderen Worten, die Oberfläche der SVG-Formen. Die Füllung ist eine der grundlegenden SVG-CSS-Eigenschaften, die Sie für jede SVG-Form festlegen können.

Füllungsbeispiel

Die Füllung der SVG-Formen ist die Füllung innerhalb des Formkonturs. Dies ist ein Beispiel für die SVG-Füllung:

<svg width="500" height="100"><circle　cx="50" cx="50" cy="250" r="
　　　　　　　　style="Umrandung:　none;　Füllung:　#0000ff;"　/></svg>

Dieser Beispiel definiert einen Kreis, der mit der Füllfarbe Blau (#0000ff) gefüllt ist, aber keine Umrandungsfarbe hat. Hier ist das generierte Bild:

Füllung und Umrandung Beispiel

Sie können die SVG-Stift- und Füllfarben kombinieren, um SVG-Formen zu erstellen. Dies ist ein Beispiel für SVG-Stift und Füllung:

<svg width="500" height="100"><circle　cx="50" cx="50" cy="250" r="
　　　　　　　　style="Umrandung:　#000066;　Füllung:　#3333ff;"　/></svg>

Dieser Beispiel verwendet eine tiefere Blau (#000066)Umrandungsfarbe und eine helle Blau (#3333ff)填充颜色定义圆。 以下是生成的图像：

fill-ff) definiert die Füllfarbe des Kreises. Hier ist das generierte Bild:

opacity-SVG CSS-Eigenschaft fill-Opacity wird verwendet, um die Opazität der Füllfarbe der Form zu setzen. fill1Werte. Je näher der Wert 0 ist, desto transparenter ist die Füllung. Je näher der Wert1Füllung, je dunkler die Füllung.-Opacity-Wert ist1bedeutet, dass die Füllfarbe vollständig undurchsichtig ist.

Dies ist ein Beispiel für die SVG-Füllungsopazität fill-Opacity-Beispiel, das zwei mit verschiedenen (fill-opacity) ist der Kreis mit der Opazität:

<svg width="500" height="120">
<text x="22" y="40">Text Behind Shape</text>
<circle cx="50" cx="50" cy="250" r="
　　　　　　　　"
　　　　　　　　　　　　　　　fill-style="stroke: none; fill: #0000ff;3opacity: 0./path>
<circle cx="120" cx="50" cy="250" r="
　　　　　　　　"
　　　　　　　　　　　　　　　fill-style="stroke: none; fill: #0000ff;7opacity: 0./path>
</svg>

;

Text Behind Shape-Die Opazität ist höher als die des linken Kreises. Beachten Sie, dass der Text hinter dem rechten Kreis weniger sichtbar ist als der Text hinter dem linken Kreis. Das liegt daran, dass der rechte Kreis fill

fill-Rule

fill-Rule bestimmen den Füllungsstil komplexer Formen. fill-Rule kann zwei verschiedene Werte annehmen. Diese Werte sind:

• nonzero

• evenodd

Normalerweise sind diese beiden Werte die Regeln, die die innere und äußere Form der Form bestimmen. Nur innere Füllung, für einen Kreis ist das einfach, aber für komplexere Formen ist das nicht so einfach. Sehen Sie sich dieses <path>-Beispiel an:

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　style="stroke: "#000000";
　　　　　　　　　fill: "#"6666ff;
　　　　　　　　　fill-rule: nonzero;
　　　　　　">/path>
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　style="stroke: "#000000";
　　　　　　　　　fill: "#"6666ff;
　　　　　　　　　fill-rule: nonzero;/path>
</svg>

Diese beiden Pfadbeispiele haben je8Linien, jede Linie wird mit einem Rhombus gezeichnet, wobei der größere Rhombus den kleineren Rhombus enthält. In der linken Pfad, wird der innere Rhombus von links nach rechts (im Uhrzeigersinn) gezeichnet. In der rechten Pfad, wird der innere Rhombus von rechts nach links (im Gegenuhrzeigersinn) gezeichnet. Dies wird mit fill verwendet-rule: non-Ergebnisbild bei der zero-Bearbeitung

Wie Sie sehen können, bestimmt die nonzero-Regel die Richtung und die Form der inneren Rhomben im Inneren der Form und die Form der inneren Rhomben. Die Regel, die bestimmt, ob ein Punkt innerhalb oder außerhalb der Form liegt, ist:

Zeichnen Sie eine Linie (Strahl) von einem Punkt in jede beliebige Richtung bis in den Unendlichen. Jedes Mal, wenn der Pfad durch diesen Strahl durchquert wird, wenn der Pfad von links nach rechts den Strahl durchquert, wird1auf den Zähler addiert; wenn der Pfad von rechts nach links den Strahl durchquert, wird von dem Zähler abgezogen1Nachdem alle durch den Strahl durchgehenden Pfade berechnet wurden, wird ein Punkt als außerhalb des Pfades betrachtet, wenn die Gesamtzahl null ist. Wenn die Gesamtzahl nicht null ist, wird der Punkt als innerhalb des Pfades betrachtet.

Dies ist ein Beispiel für den gleichen Pfad, der mit fill verwendet wird-rule: evenodd

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　style="stroke: "#000000";
　　　　　　fill: "#"6666ff;
　　　　　　fill-rule: "evenodd";"/path>
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　style="stroke: "#000000";
　　　　　　fill: "#"6666ff;
　　　　　　fill-rule: "evenodd";"/path>
</svg>

Nach dem Ausführen des Bildeffekts:

evenodd bedeutet wörtlich 'ungerade und gerade'. Nach diesem Muster muss bestimmt werden, ob ein Punkt innerhalb einer Figur liegt. Ein Strahl in beliebige Richtung vom Punkt aus gezogen wird, und die Anzahl der Schnittpunkte zwischen dem Strahl und dem Pfad der Figur wird überprüft. Ein Strahl wird vom Punkt aus in alle Richtungen bis in den Unendlichen gezogen (Strahl). Jedes Mal, wenn der Pfad den Strahl durchschneidet, wird der Zähler erhöht. Wenn die Gesamtzahl gerade ist, liegt der Punkt draußen. Wenn die Gesamtzahl ungerade ist, liegt der Punkt innerhalb der Form.