W3docs
de
Anmelden

SVG-Strich

SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. See some of the stroke properties in use.

Beschreibung der Strich-Eigenschaften

SVG bietet verschiedene Strich-Eigenschaften, die auf beliebigen Text, Linien und Umrandungen von Elementen angewendet werden können. Sie ermöglichen die Steuerung verschiedener Aspekte eines Strichs. Hier sind einige Strich-Eigenschaften:

  • stroke zur Angabe der Farbe einer Linie, Umrandung oder des Texts eines Elements,
  • stroke-linecap zur Angabe, wie die Enden einer SVG-Linie gerendert werden,
  • stroke-width zur Angabe der Dicke einer Linie, Umrandung oder des Texts eines Elements,
  • stroke-dasharray zur Angabe gestrichelter Linien.

Beispiel zur stroke-Eigenschaft:

Beispiel zur stroke-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100" >
      <g fill="none">
        <path stroke="purple" d="M5 30 l215 0" />
        <path stroke="lightgreen" d="M5 60 l215 0" />
        <path stroke="pink" d="M5 90 l215 0" />
      </g>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>
Probier es selbst »

Beispiel zur stroke-linecap-Eigenschaft:

Beispiel zur stroke-linecap-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightblue" stroke-width="10">
        <path stroke-linecap="butt" d="M5 30 l215 0" />
        <path stroke-linecap="round" d="M5 60 l215 0" />
        <path stroke-linecap="square" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Probier es selbst »

Beispiel zur stroke-width-Eigenschaft:

Beispiel zur stroke-width-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="lightgreen">
        <path stroke-width="3" d="M5 30 l215 0" />
        <path stroke-width="5" d="M5 60 l215 0" />
        <path stroke-width="7" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Probier es selbst »

Beispiel zur stroke-dasharray-Eigenschaft:

Beispiel zur stroke-dasharray-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="100">
      <g fill="none" stroke="orange" stroke-width="5">
        <path stroke-dasharray="3,5" d="M5 30 l215 0" />
        <path stroke-dasharray="12,12" d="M5 60 l215 0" />
        <path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
      </g>
    </svg>
  </body>
</html>
Probier es selbst »

Practice

Übung

Welche der folgenden Aussagen sind über SVG-Striche in HTML wahr?