SVG
Polylinie
Suche…
Syntax
<polyline points="10,5 25,15 20,10" />
Parameter
| Parameter | Einzelheiten |
|---|---|
| Punkte | Das points-Attribut definiert eine Liste von Punkten. Jeder Punkt wird im Koordinatensystem des Benutzers durch die Koordinaten axt und ay definiert. |
| Strichbreite | Schlagweite |
| Schlaganfall-Opazität | Deckkraft des Schlaganfalls |
| Schlaganfall-Strich | (Optional) Gibt das Strichmuster für den Strich an |
| Strichlinienkappe | (Optional) Gibt an, ob das Zeilenende bündig, rund oder eckig sein soll ("butt" (Standard) / "round" / "square"). |
| Schlagzeilenverbindung | (Optional) Gibt an, wie Liniensegmente verbunden werden sollen - Gehrung, Abgerundet oder Abschrägung ("Gehrung" (Standard) / "Runde" / "Abschrägung") |
| Schlaganfalllimit | (Optional) Gibt die maximale Abmessung einer Gehrung an. Gehrte Joins, die dieses Limit überschreiten, werden in einen Abschrägungs-Join umgewandelt. Default = "4" |
SVG einschließlich einer Polylinie
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="10,5 25,15 20,10" />
</svg>
Polylinien mit alternativen Linejoins, Linecaps und Miterlimits
<svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" />
<text x="320" y="20">Default drawing stroke</text>
<g transform="translate(0,150)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="2"/>
<text x="320" y="20">stroke-linecap="butt" (default)</text>
<text x="320" y="40">stroke-linejoin="miter"(default)</text>
<text x="320" y="60">stroke-miterlimit="2"</text>
</g>
<g transform="translate(0,300)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
<text x="320" y="20">stroke-linecap="round" </text>
<text x="320" y="40">stroke-linejoin="round" </text>
</g>
<g transform="translate(0,450)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="square" stroke-linejoin="bevel"/>
<text x="320" y="20">stroke-linecap="square"</text>
<text x="320" y="40">stroke-linejoin="bevel"</text>
</g>
</svg>
Ergebnis
Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow