Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
The <polyline>
SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline
is used to create open shapes as the last point doesn't have to be connected to the first point. For closed shapes see the <polygon>
element.
Usage context
Categories | Basic shape element, Graphics element, Shape element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Attributes
Global attributes
- Conditional processing attributes
- Core attributes
- Graphical event attributes
- Presentation attributes
class
style
externalResourcesRequired
transform
Specific attributes
DOM Interface
This element implements the SVGPolylineElement
interface.
Examples
Simple usage
SVG
<svg width="120" height="120" xmlns="https://www.w3.org/2000/svg"> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20"/> </svg>
Result
Stairs example
HTML Content
<div class="contain-demo"> <svg width="150" height="200"> <desc> First orange polyline demonstrating white fill on open path. </desc> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#D07735" stroke-width="6" /> </svg> <svg width="150" height="200"> <desc> Second orange polyline demonstrating yellow fill on open path. </desc> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="#F9F38C" stroke="#D07735" stroke-width="6" /> </svg> </div> <p class="p"> Demo by Joni Trythall. <a href="https://sitepoint.com/understanding-svg-fill-rule-property">See article</a>. </p>
CSS Content
.contain-demo { margin: 25px auto; text-align: center; }
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<polyline>' in that specification. |
Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<polyline>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0 | 1.0 (1.8) | No support | (Yes) | 3.0.4 |
The chart is based on these sources.
See also
Schlagwörter des Dokuments und Mitwirkende
Schlagwörter:
Mitwirkende an dieser Seite:
Sebastianz,
brunoais,
Tigt,
gregtatum,
kscarfone,
Jeremie,
Manuel_Strehl,
trevorh,
Wjjohnst
Zuletzt aktualisiert von:
Sebastianz,