path

  • Raccourci de la révision : SVG/Element/path
  • Titre de la révision : path
  • ID de la révision : 58727
  • Créé :
  • Créateur : gemy_c
  • Version actuelle ? Non
  • Commentaire 13 words added, 14 words removed

Contenu de la révision

<< Page d'accueil des éléments SVG

L'élément path est l'élément générique pour définir une forme. Toutes les formes basique peuvent aussi être faites à partir de path.

Usage

Catégories Éléments graphiques, Éléments de Formes
Contenu autorisé Tout élément de cette liste, quel qu'en soit l'ordre:
Éléments d'animation »
Éléments de description »
Document Normatif SVG 1.1 (2nde Édition)

Exemple

<?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>

Attributs

Attributs Globaux

Attributs spécifiques

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

Interface DOM

Cet élément implémente l'interface SVGPathElement.

Browser compatibility

Compatibilité avec les navigateurs

{{ CompatibilityTable() }}

Fonctionnalités Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support basique 1.0 {{ CompatGeckoDesktop('1.8') }} {{ CompatIE('9.0') }} {{ CompatOpera('8.0') }} {{ CompatSafari('3.0.4') }}
Fonctionnalités Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support basique {{ CompatAndroid('3.0') }} {{ CompatGeckoMobile('1.8') }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatSafari('3.0.4') }}

Cette table est basée sur  ces ressources.

Corrélat

Source de la révision

<p><a href="/fr/SVG/Element" title="https://developer.mozilla.org/fr/SVG/Element">&lt;&lt; Page d'accueil des éléments SVG</a></p>
<p>L'élément <code>path</code> est l'élément générique pour définir une forme. Toutes les formes basique peuvent aussi être faites à partir de <code>path</code>.</p>
<h2 id="Usage">Usage</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Catégories</th> <td>Éléments graphiques, Éléments de Formes</td> </tr> <tr> <th scope="row">Contenu autorisé</th> <td>Tout élément de cette liste, quel qu'en soit l'ordre:<br> <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Éléments d'animation</a> »<br> <a href="/fr/SVG/Element#Descriptive" title="fr/SVG/Element#Descriptive">Éléments de description</a> »</td> </tr> <tr> <th scope="row">Document Normatif</th> <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElement" title="http://www.w3.org/TR/SVG/shapes.html#CircleElement">SVG 1.1 (2nde Édition)</a></td> </tr> </tbody>
</table>
<h2 id="Exemple">Exemple</h2>
<pre class="deki-transform">&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="Attributs">Attributs</h2>
<h3 id="Attributs_Globaux">Attributs Globaux</h3>
<ul> <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li> <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li> <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li> <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> <li>{{ SVGAttr("transform") }}</li>
</ul>
<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
<ul> <li>{{ SVGAttr("d") }}</li> <li>{{ SVGAttr("pathLength") }}</li>
</ul>
<h2 id="Interface_DOM">Interface DOM</h2>
<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGPathElement" title="en/DOM/SVGPathElement">SVGPathElement</a></code>.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th scope="col">Fonctionnalités</th> <th scope="col">Chrome</th> <th scope="col">Firefox (Gecko)</th> <th scope="col">Internet Explorer</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <td>Support basique</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>Fonctionnalités</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support basique</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>Cette table est basée sur <a href="/en/SVG/Compatibility_sources" title="fr/SVG/Compatibility sources"> ces ressources</a>.</p>
<h2 id="Corrélat">Corrélat</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/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li>
</ul>
Revenir à cette révision