path

  • Revision slug: SVG/Element/path
  • Revision title: path
  • Revision id: 312955
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ SVGRefElem() }}

Summary

The path element is the generic element to define a shape. All the basic shape can be done with a path element.

Usage context

Categories Graphics element, Shape element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Normative document SVG 1.1 (2nd Edition)

Example

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke-width="3" />
</svg>

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("d") }}
  • {{ SVGAttr("pathLength") }}

DOM_Interface

This element implements the SVGPathElement interface.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop('1.8') }} {{ CompatIE('9.0') }} {{ CompatOpera('8.0') }} {{ CompatSafari('3.0.4') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatAndroid('3.0') }} {{ CompatGeckoMobile('1.8') }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatSafari('3.0.4') }}

The chart is based on these sources.

See also

Revision Source

<div>{{ SVGRefElem() }}</div>

<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>path</code> element is the generic element to define a shape. All the basic shape can be done with a path element.</p>


<h2 id="Usage_context" name="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Graphics element, Shape element</td>
    </tr>
    <tr>
      <th scope="row">Permitted content</th>
      <td>Any number of the following elements, in any order:<br />
        <a href="/en-US/docs/SVG/Element#Animation" title="SVG/Attribute#Animation">Animation elements</a> »<br />
        <a href="/en-US/docs/SVG/Element#Descriptive" title="SVG/Attribute#Descriptive">Descriptive elements</a> »</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/paths.html" title="http://www.w3.org/TR/SVG/paths.html">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>


<h2 id="Example" name="Example">Example</h2>
<pre class="brush: xml">
&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
&lt;svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;

  &lt;path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke-width="3" /&gt;
&lt;/svg&gt;
</pre>


<h2 id="Attributes" name="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
  <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
  <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li>
  <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
  <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Presentation attributes</a> »</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
  <li>{{ SVGAttr("transform") }}</li>
</ul>



<h3 id="Specific_attributes" name="Specific_attributes">Specific attributes</h3>
<ul>
  <li>{{ SVGAttr("d") }}</li>
  <li>{{ SVGAttr("pathLength") }}</li>
</ul>


<h2 id="DOM_Interface" name="DOM_Interface">DOM_Interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/SVGPathElement" title="DOM/SVGPathElement">SVGPathElement</a></code> interface.</p>


<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>IE</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop('1.8') }}</td>
        <td>{{ CompatIE('9.0') }}</td>
        <td>{{ CompatOpera('8.0') }}</td>
        <td>{{ CompatSafari('3.0.4') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatAndroid('3.0') }}</td>
        <td>{{ CompatGeckoMobile('1.8') }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatSafari('3.0.4') }}</td>
      </tr>
    </tbody>
  </table>
</div>

<p>The chart is based on <a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">these sources</a>.</p>


<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ SVGElement("circle") }}</li>
  <li>{{ SVGElement("ellipse") }}</li>
  <li>{{ SVGElement("line") }}</li>
  <li>{{ SVGElement("polygon") }}</li>
  <li>{{ SVGElement("polyline") }}</li>
  <li>{{ SVGElement("rect") }}</li>
  <li><a href="/en-US/docs/SVG/Tutorial/Paths" title="SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li>
</ul>
Revert to this revision