diff options
Diffstat (limited to 'files/fr/web/svg/attribute/preserveaspectratio/index.html')
| -rw-r--r-- | files/fr/web/svg/attribute/preserveaspectratio/index.html | 423 |
1 files changed, 423 insertions, 0 deletions
diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.html b/files/fr/web/svg/attribute/preserveaspectratio/index.html new file mode 100644 index 0000000000..b433de89fd --- /dev/null +++ b/files/fr/web/svg/attribute/preserveaspectratio/index.html @@ -0,0 +1,423 @@ +--- +title: preserveAspectRatio +slug: Web/SVG/Attribute/preserveAspectRatio +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/preserveAspectRatio +--- +<div>{{SVGRef}}</div> + +<p>L'attibut <strong><code>preserveAspectRatio</code></strong> indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur du {{SVGAttr('viewBox')}} est différent du ratio de la zone d'affichage (définit par les attributs width et height).</p> + +<p>Parce que les proportions du SVG sont définis par l'attribut <code>viewBox</code>, si ce dernier n'est pas définit alors l'attribut <code>preserveAspectRatio</code> n'a aucun effet (<em>à l'exception près de l'élément {{SVGElement('image')}} comme décrit ci-dessous</em>).</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: html"><svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /> + </defs> + + <!-- (width>height) meet --> + <svg preserveAspectRatio="xMidYMid meet" x="0" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMinYMid meet" x="25" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMaxYMid meet" x="50" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + + <!-- (width>height) slice --> + <svg preserveAspectRatio="xMidYMin slice" x="0" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMid slice" x="25" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMax slice" x="50" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + + <!-- (width<height) meet --> + <svg preserveAspectRatio="xMidYMin meet" x="75" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMid meet" x="90" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMax meet" x="105" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + + <!-- (width<height) slice --> + <svg preserveAspectRatio="xMinYMid slice" x="120" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMid slice" x="135" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMaxYMid slice" x="150" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + + <!-- none --> + <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> +</svg></pre> + +<div class="hidden"> +<h6 id="topExample">topExample</h6> + +<pre class="brush: css">html,body,svg { height:100% } +</pre> + +<pre class="brush: html"><svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /> + </defs> + + <!-- (width>height) meet --> + <rect x="0" y="0" width="20" height="10"> + <title>xMidYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMid meet" x="0" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="25" y="0" width="20" height="10"> + <title>xMinYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMinYMid meet" x="25" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="50" y="0" width="20" height="10"> + <title>xMaxYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMaxYMid meet" x="50" y="0"> + <use href="#smiley" /> + </svg> + + <!-- (width>height) slice --> + <rect x="0" y="15" width="20" height="10"> + <title>xMidYMin slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMin slice" x="0" y="15"> + <use href="#smiley" /> + </svg> + + <rect x="25" y="15" width="20" height="10"> + <title>xMidYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMid slice" x="25" y="15"> + <use href="#smiley" /> + </svg> + + <rect x="50" y="15" width="20" height="10"> + <title>xMidYMax slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMax slice" x="50" y="15"> + <use href="#smiley" /> + </svg> + + <!-- (width<height) meet --> + <rect x="75" y="0" width="10" height="25"> + <title>xMidYMin meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMin meet" x="75" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="90" y="0" width="10" height="25"> + <title>xMidYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMid meet" x="90" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="105" y="0" width="10" height="25"> + <title>xMidYMax meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMax meet" x="105" y="0"> + <use href="#smiley" /> + </svg> + + <!-- (width<height) slice --> + <rect x="120" y="0" width="10" height="25"> + <title>xMinYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMinYMid slice" x="120" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="135" y="0" width="10" height="25"> + <title>xMidYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMid slice" x="135" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="150" y="0" width="10" height="25"> + <title>xMaxYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMaxYMid slice" x="150" y="0"> + <use href="#smiley" /> + </svg> + + <!-- none --> + <rect x="0" y="30" width="160" height="60"> + <title>none</title> + </rect> + <svg viewBox="0 0 100 100" width="160" height="60" + preserveAspectRatio="none" x="0" y="30"> + <use href="#smiley" /> + </svg> +</svg></pre> + +<pre class="brush: css">path { + fill: yellow; + stroke: black; + stroke-width: 8px; + stroke-linecap: round; + stroke-linejoin: round; + pointer-events: none; +} + +rect:hover, rect:active { + outline: 1px solid red; +}</pre> +</div> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">preserveAspectRatio="<align> [<meetOrSlice>]"</pre> + +<p>La valeur de l'attribut est constituée d'un ou deux mots clés: l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:</p> + +<dl> + <dt>Alignement</dt> + <dd>L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur du {{ SVGAttr("viewBox") }} ne correspond pas à celui affiché. Les différentes valeurs possibles sont: + <ul> + <li><strong>none</strong><br> + Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. <em>Notez que si </em><code><align></code><em> vaut </em><code>none</code><em>, alors la valeur </em><code><meetOrSlice></code><em> est ignorée</em>.</li> + <li><strong>xMinYMin</strong> - Force la mise à l'échelle uniforme.<br> + Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br> + Aligne le côté haut de l'élément en haut de la zone d'affichage.</li> + <li><strong>xMidYMin</strong> - Force la mise à l'échelle uniforme.<br> + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br> + Aligne le côté haut de l'élément en haut de la zone d'affichage.</li> + <li><strong>xMaxYMin</strong> - Force la mise à l'échelle uniforme.<br> + Aligne le côté droit de l'élément à droite de la zone d'affichage.<br> + Aligne le côté haut de l'élément en haut de la zone d'affichage.</li> + <li><strong>xMinYMid</strong> - Force la mise à l'échelle uniforme.<br> + Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br> + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li> + <li><strong>xMidYMid</strong> (<em>par défaut</em>) - Force la mise à l'échelle uniforme.<br> + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br> + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li> + <li><strong>xMaxYMid</strong> - Force la mise à l'échelle uniforme.<br> + Aligne le côté droit de l'élément à droite de la zone d'affichage.<br> + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li> + <li><strong>xMinYMax</strong> - Force la mise à l'échelle uniforme.<br> + Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br> + Aligne le côté bas de l'élément en bas de la zone d'affichage.</li> + <li><strong>xMidYMax</strong> - Force la mise à l'échelle uniforme.<br> + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br> + Aligne le côté bas de l'élément en bas de la zone d'affichage.</li> + <li><strong>xMaxYMax</strong> - Force la mise à l'échelle uniforme.<br> + Aligne le côté droit de l'élément à droite de la zone d'affichage.<br> + Aligne le côté bas de l'élément en bas de la zone d'affichage.</li> + </ul> + </dd> + <dt>Meet ou slice</dt> + <dd>La valeur <em>meet</em> ou <em>slice</em> est optionnelle. Les deux valeurs possibles sont: + <ul> + <li><strong>meet</strong> (<em>par défaut</em>) - Mettre à l'échelle l'image tel que: + <ul> + <li>les proportions sont préservées</li> + <li>la {{ SVGAttr("viewBox") }} est entièrement visible dans la zone d'affichage</li> + <li>la {{ SVGAttr("viewBox") }} est agrandie autant que possible, tout en respectant les autres critères</li> + </ul> + Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà du {{ SVGAttr("viewBox") }} (la zone dans laquelle sera dessinée la {{ SVGAttr("viewBox") }} sera plus petite que la zone d'affichage).</li> + <li><strong>slice</strong> - Mettre à l'échelle l'image tel que: + <ul> + <li>les proportions sont préservées</li> + <li>la zone d'affichage est entièrement remplie par la {{ SVGAttr("viewBox") }}</li> + <li>la {{ SVGAttr("viewBox") }} est réduite autant que possible, tout en respectant les autres critères</li> + </ul> + Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la {{ SVGAttr("viewBox") }} sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la {{ SVGAttr("viewBox") }} sera plus grande que la zone d'affichage).</li> + </ul> + </dd> +</dl> + +<h2 id="Éléments">Éléments</h2> + +<p>Sept éléments utilisent cet attribut: {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("image")}}, {{SVGElement("feImage")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, and {{SVGElement("view")}}.</p> + +<h3 id="feImage">feImage</h3> + +<p>Pour {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code><feImage></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<h3 id="image">image</h3> + +<p>Pour {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code><image></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<h3 id="marker">marker</h3> + +<p>Pour {{SVGElement('marker')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<h3 id="pattern">pattern</h3> + +<p>Pour {{SVGElement('pattern')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<h3 id="svg">svg</h3> + +<p>Pour {{SVGElement('svg')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<h3 id="symbol">symbol</h3> + +<p>Pour {{SVGElement('symbol')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<h3 id="view">view</h3> + +<p>Pour {{SVGElement('view')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> |