SVG Stroke-Attribut

In SVGstrokeDas Attribut wird verwendet, um die Stroke-Farbe (Rahmenfarbe) von grafischen Elementen zu definieren. Es kann auf jedes grafische Element mit einer Kontur angewendet werden, wie z. B.<rect>、<circle>、<path>usw.

Grundlegende Syntax

<element stroke="color" />

Attributerklärung:

  • strokeDas Attribut definiert die Stroke-Farbe eines grafischen Elements. Sie können Farbnamen, hexadezimale Farbwerte, RGB-Werte, RGBA-Werte usw. verwenden, um die Farbe darzustellen.

  • Wenn Sie den Stroke nicht anzeigen möchten, können Sie dasstrokeAttribut auf "none" setzen.

SVG bietet eine breite Palette an Stroke-Attributen.

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray

Alle Stroke-Attribute können auf jede Art von Linien, Text und Elementen angewendet werden, genau wie die Kontur eines Kreises.

Der folgende Code zeichnet ein rot gefülltes Rechteck und legt einen blauen Stroke fest.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个红色矩形，带有蓝色描边 -->
  <rect x="50" y="50" width="100" height="80" fill="red" stroke="blue" />
</svg>

SVG-Stroke-Attribut

Das stroke-Attribut definiert die Konturfarbe einer Linie, eines Textes oder eines Elements:

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="blue" d="M5 40 l215 0" /> <path stroke="black" d="M5 60 l215 0" /> </g> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

SVG-Attribut stroke-width

Das stroke-width-Attribut definiert die Dicke der Kontur einer Linie, eines Textes oder eines Elements:

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black"> <path stroke-width="2" d="M5 20 l215 0" /> <path stroke-width="4" d="M5 40 l215 0" /> <path stroke-width="6" d="M5 60 l215 0" /> </g> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

SVG-Attribut stroke-linecap

Das Attribut stroke-linecap definiert den Abschluss verschiedener Arten von offenen Pfaden:

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-linecap="square" d="M5 60 l215 0" /> </g> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken: SVG-Datei anzeigen.

SVG-Attribut stroke-dasharray

Das Attribut stroke-dasharray wird verwendet, um gestrichelte Linien zu erstellen:

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Hinweise

  • Wenn Sie die Strichfarbe und die Strichbreite gleichzeitig festlegen müssen, können Sie dasstroke-widthAttribut zum Definieren der Breite des Strichs.

  • Sie können diestroke-opacityAttribut zum Definieren der Deckkraft des Strichs.

  • Die Strichfarbe und -breite können über CSS-Stylesheets festgelegt oder direkt am Element mit demstyleAttributs.

Durch Setzen des stroke-Attributs können Sie SVG-Grafikelementen Konturen hinzufügen, wodurch die Grafiken optisch ansprechender und besser erkennbar werden.

Andere Erweiterungen