Stroke Eigenschaften

Stroke mit einzelner Farbe

Zuerst gehen wir ganz grundlegend auf das Attribut stroke ein. Diese erläutern wir hier anhand eines Beispiels.

Das Attribut Stroke malt entlang der outline des gegebenen grafischen Elements. Im Beispiel unten anhand eines Kreis SVG-Elements und der Farbe Pink dargestellt.

• Value: <paint> (Siehe Farbwerte Unten)
• Initial: none
• Applies to: shapes and text content elements
• Inherited: yes
• Percentages: N/A
• Media: visual
• Animatable: yes

Stroke erhält hierbei einen Farbwert. Das Attribut Stroke akzeptiert alle CSS Farbwerte.

• Farbnamen — orange
• Hex Farben — #FF9E2C
• RGB und RGBa Farben-rgb(255, 158, 44) und rgba(255, 158, 44, .5)
• HSL und HSLa Farben-hsl(32, 100%, 59%)und hsla(32, 100%, 59%, .5)

Wir können die Eigenschaft Stroke entweder direkt beim erstellen des SVG Elements vergeben:

HTML-Code

<circle class="circleColor" cx="50" cy="50" r="40" fill="none" stroke="pink" stroke-width="5">

Oder aber die Eigenschaft Stroke in der CSS-Datei vergeben:

Beispiel CSS-Sorucecode

.circleColor{
                      stroke: pink;
                      stroke-width:5;
                      }

                    

Stroke-width

Im zweiten Beispiel gehen wir auf eine weitere Stroke Eigenschaft ein die wir bereits im ersten Beispiel gesehen haben: stroke-width.

• Value: <percentage> | <length> | <inherit>
• Initial: 1
• Applies to: shapes and text content elements
• Inherited: yes
• Percentages: Yes
• Media: visual
• Animatable: yes

Wir können die Eigenschaft Stroke-width wieder direkt deklarieren:

HTML-Code

<circle class="circleStrokeWidth" cx="50" cy="50" r="40" fill="none" stroke="red" stroke-width="10"/>

Oder aber wieder in der CSS-Datei:

CSS-Sorucecode

.circleStrokeWidth{
       stroke: red;
       stroke-width:10;
       }

       

Der Eigenschaft "stroke-width" wurde hier die Zahl 10 zugewiesen und wie Sie sehen ist die Größe des Strokes doppelt so groß wie im ersten Beispiel.

Die Eigenschaft "stroke-width akzeptiert alle Zahlen inklusive ganzer Zahlen, Dezimalzahlen und Prozente:

• stroke-width: 2px
• stroke-width: 2em
• stroke-width: 2
• stroke-width: 2.5
• stroke-width: 15%

Stroke linecap

Als nächstes gehen wir auf die Eigenschaft Stroke linecap ein.

• Value: butt | round | square | inherit
• Initial: butt
• Applies to: shapes and text content elements
• Inherited: yes
• Percentages: N/A
• Media: visual
• Animatable: yes

Als erstes Zeichnen wir drei linien und weisen diesen jeweils eine Klasse zu:

HTML-Code 

<svg width="300px" height="110px">
              <line class="line-butt" x1="40" x2="250" y1="20" y2="20" />
              <line class="line-square" x1="40" x2="250" y1="60" y2="60" />
              <line class="line-round" x1="40" x2="250" y1="100" y2="100" />
              </svg>
            

Und dann weisen wir den eben Erstellen Linien und ihren Klassen die linecap eigenschaften in der CSS-Datei zu:

CSS-Code

.line-butt {
  stroke-linecap: butt;
}

.line-square {
  stroke-linecap: square;
}

.line-round {
  stroke-linecap: round;
}

Stroke opacity

Als letztes gehen wir auf Stroke opacity ein.Mit dem Attribut stroke-opacity können Sie die Durchsichtigkeit (Transparenz) einer Randlinie bestimmen. Zulässige Werte liegen zwischen 0 und 1. 0 bedeutet völlige Tranzparenz, 1 bedeutet keine Transparenz.

• Value: <opacity-value> | inherit
• Initial: 1
• Applies to: shapes and text content elements
• Inherited: yes
• Percentages: N/A
• Media: visual
• Animatable: yes

Als erstes zeichnen wir 3 Linien und legen für jede wieder eine Klasse an:

<svg width="300px" height="110px">
             <line class="lineopacity1" x1="40" x2="250" y1="20" y2="20" />
             <line class="lineopacity2" x1="40" x2="250" y1="60" y2="60" />
             <line class="lineopacity3" x1="40" x2="250" y1="100" y2="100" />
             </svg>

Dann weisen wir den Klassen ein opacity attribute zu:

.lineopacity1 {
  ;
  stroke-opacity:0.25;
}

.lineopacity2 {

  stroke-opacity:0.5;
}

.lineopacity3 {

  stroke-opacity:1.0;
}