Neueste Web-Entwicklung Tutorials
 

SVG Stroke Eigenschaften


SVG Stroke Eigenschaften

SVG bietet eine breite Palette von Schlaganfall-Eigenschaften. In diesem Kapitel werden wir unter der folgenden aussehen:

  • Schlaganfall
  • Schlaganfall-Breite
  • Schlaganfall-linecap
  • Schlaganfall-dasharray

Alle Hub Eigenschaften können auf jede Art von Linien, Text und Konturen von Elementen wie ein Kreis angewendet werden.


SVG Schlaganfall Property

Der Hub Eigenschaft definiert die Farbe einer Linie, Text oder Umriss eines Elements:

Sorry, Ihr Browser unterstützt keine Inline-SVG.

Hier ist der SVG-Code:

Beispiel

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>
Versuch es selber "

SVG stroke-width Eigenschaft

Der Hub-Breite Eigenschaft definiert die Dicke einer Linie, Text oder Umriss eines Elements:

Sorry, Ihr Browser unterstützt keine Inline-SVG.

Hier ist der SVG-Code:

Beispiel

<svg height="80" width="300">
  <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>
Versuch es selber "

SVG Schlaganfall-linecap Property

Der Hub-linecap Eigenschaft definiert verschiedene Arten von Endungen zu einem offenen Pfad:

Sorry, Ihr Browser unterstützt keine Inline-SVG.

Hier ist der SVG-Code:

Beispiel

<svg height="80" width="300">
  <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>
Versuch es selber "

SVG Schlaganfall-dasharray Property

Der Hub-dasharray Eigenschaft wird verwendet, gestrichelte Linien zu erstellen:

Sorry, Ihr Browser unterstützt keine Inline-SVG.

Hier ist der SVG-Code:

Beispiel

<svg height="80" width="300">
  <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>
Versuch es selber "