SVG <circle> Kreis zeichnen

<circle> SVG-Element ist ein grundlegendes SVG-Formelement, das verwendet wird, um Kreise zu erstellen, basierend auf einem Mittelpunkt und einem Radius, und gleichzeitig kann es mit stroke- und fill-Attribut die Kreise mit durchgehender Umrandung, punktförmiger Umrandung und farbiger Füllung usw. verwenden.

SVG <circle>-Element wird verwendet, um Kreise zu zeichnen. Dies ist ein einfaches Beispiel:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

Dies ist das Bild des Laufergebnisses

Dieser Kreis hat den Punkt cx, cy als Mittelpunkt und den Radius r. cx, cy und r sind die Attribute des <circle>-Elements.

Circular Outline

Sie können die SVG-Stroke-Style-Attribut verwenden, um die Umrandung der SVG-Kreise zu setzen. In der ersten Beispiel auf dieser Seite ist die Strich gesetzt auf #006600 tiefgrün. Aber, Sie können nicht nur die Strichfarbe festlegen, sondern auch mehr. Sie können auch stroke verwenden-widthstyle-Attribut wird die Breite des Strichs festgelegt. Dies ist ein Beispiel:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　fill:#00cc00"/></svg>

Das Aussehen des Kreises nach dem Lauf ist wie folgt:

Sie können auch stroke verwenden-dasharray-Attribut zeichnet den Rahmen mit Strichen. Dies ist ein Beispiel:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　fill:#00cc00"/></svg>

Das Aussehen nach der Renderung ist wie folgt:

Sie können auch den Rahmen des Kreises löschen (umrandung), und nur mit der Füllfarbe füllen. Ein Beispielcode ist wie folgt:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: none;
　　　　　　　　　　　fill:#00cc00"/></svg>

Das Ergebnis ohne Rahmen des Kreises ist wie folgt:

Circle Fill

Die fill-Style-Attribut kontrolliert die Füllung des Kreises. Durch das Setzen der fill-Attribut auf none, können Sie wählen, nicht gefüllt zu sein.
Ein Beispiel ist wie folgt:

Das Aussehen des Kreises ohne Füllung ist wie folgt:

Sie können die Füllfarbe mit der fill-Attribut festlegen, wie in diesem Dokument zuvor beschrieben, das Beispielcode ist wie folgt:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: #"660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

Das Aussehen des Füllens und der Farbe des Kreises wird wie folgt dargestellt:

Sie können auch fill verwenden-Der Style-Attribute wird die Füllung auf transparent gesetzt. Der folgende Beispiel zeichnet zwei Kreise, von denen einer teilweise über den anderen liegt und halbtransparent ist.

<svg　height="80px">
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:　#660000;
　　　　　　　　　　　　　　　　　　　fill:　#cc0000;
　　　　　　　　　　　　></circle>
　　　　<circle　cx="64"　cy="40"　r="24"　style="stroke:　#000099;
　　　　　　　　　　　　　　　　　　　fill:　#0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　　　　　></circle>
</svg>

Der Effekt läuft wie folgt:

Bitte beachten Sie, dass der blaue (rechte) Kreis jetzt innen halbtransparent ist. Um auch die Striche halbtransparent zu machen, muss stroke verwendet werden-Eigenschaft opacitystyle.