MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 426919 of points

  • Revision slug: Web/SVG/Attribute/points
  • Revision title: points
  • Revision id: 426919
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment 46 words addedSVG/Attribute/points Web/SVG/Attribute/points

Revision Content

« SVG Attribute reference home

The points attribute define a list of points required to draw a  {{ SVGElement("polyline") }} or {{ SVGElement("polygon") }} element.

Each point is define by a X and a Y coordinate in the user coordinate system. It's a common practice (but not required) to use a comma to mark out the X and Y coordinate of each point and to use space to mark out each point.

Usage context

Categories None
Value <list-of-points>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): The polyline element
SVG 1.1 (2nd Edition): The polygon element

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 250,150 200,110"
           style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Elements

The following elements can use the points attribute

  • {{ SVGElement("polyline") }}
  • {{ SVGElement("polygon") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The points attribute define a list of points required to draw a  {{ SVGElement("polyline") }} or {{ SVGElement("polygon") }} element.</p>
<p>Each point is define by a X and a Y coordinate in the user coordinate system. It's a common practice (but not required) to use a comma to mark out the X and Y coordinate of each point and to use space to mark out each point.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>None</td> </tr> <tr> <th scope="row">Value</th> <td>&lt;list-of-points&gt;</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#PolylineElementPointsAttribute" title="http://www.w3.org/TR/SVG/shapes.html#PolylineElementPointsAttribute">SVG 1.1 (2nd Edition): The polyline element</a><br> <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#PolygonElementPointsAttribute" title="http://www.w3.org/TR/SVG/shapes.html#PolygonElementPointsAttribute">SVG 1.1 (2nd Edition): The polygon element</a></td> </tr> </tbody>
</table>
<h2 id="Example">Example</h2>
<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;polygon points="100,10 250,150 200,110"
           style="fill:lime;stroke:purple;stroke-width:1" /&gt;
&lt;/svg&gt;
</pre>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>points</code> attribute</p>
<ul> <li>{{ SVGElement("polyline") }}</li> <li>{{ SVGElement("polygon") }}</li>
</ul>
Revert to this revision