SVG-Strich

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

html

<!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>

Try it Yourself »

Beispiel zur stroke-linecap-Eigenschaft:

Beispiel zur stroke-linecap-Eigenschaft

html

<!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>

Try it Yourself »

Beispiel zur stroke-width-Eigenschaft:

Beispiel zur stroke-width-Eigenschaft

html

<!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>

Try it Yourself »

Beispiel zur stroke-dasharray-Eigenschaft:

Beispiel zur stroke-dasharray-Eigenschaft

html

<!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>

Try it Yourself »

Practice

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

Die stroke-Eigenschaft wird verwendet, um die Farbe einer SVG-Form festzulegen.Die stroke-width-Eigenschaft wird verwendet, um die Breite des Strichs auf einer SVG-Form festzulegen.Die stroke-dasharray-Eigenschaft wird verwendet, um gestrichelte Linien auf einer SVG-Form festzulegen oder zu entfernen.Die stroke-linecap-Eigenschaft wird verwendet, um die Farbe der Ecken auf einer SVG-Form festzulegen.Die stroke-linejoin-Eigenschaft wird verwendet, um die Form festzulegen, die an den Ecken von Pfaden verwendet wird, wenn diese gestrichelt werden.Die stroke-opacity-Eigenschaft wird verwendet, um die Breite des Strichs auf einer SVG-Form zu erhöhen.

SVG-Strich ​

Beschreibung der Strich-Eigenschaften ​

Beispiel zur stroke-Eigenschaft: ​

Beispiel zur stroke-linecap-Eigenschaft: ​

Beispiel zur stroke-width-Eigenschaft: ​

Beispiel zur stroke-dasharray-Eigenschaft: ​

Practice ​

SVG-Strich

Beschreibung der Strich-Eigenschaften

Beispiel zur stroke-Eigenschaft:

Beispiel zur stroke-linecap-Eigenschaft:

Beispiel zur stroke-width-Eigenschaft:

Beispiel zur stroke-dasharray-Eigenschaft:

Practice