diff options
Diffstat (limited to 'files/fr/web/svg/attribute/preserveaspectratio/index.html')
| -rw-r--r-- | files/fr/web/svg/attribute/preserveaspectratio/index.html | 42 |
1 files changed, 5 insertions, 37 deletions
diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.html b/files/fr/web/svg/attribute/preserveaspectratio/index.html index 7d5ffb6db1..894241bcf5 100644 --- a/files/fr/web/svg/attribute/preserveaspectratio/index.html +++ b/files/fr/web/svg/attribute/preserveaspectratio/index.html @@ -20,41 +20,6 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio </defs> <!-- (largeur>hauteur) 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> - - <!-- (largeur>hauteur) 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> - - <!-- (largeur<hauteur) 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> - - <!-- (largeur<hauteur) 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> - - <!-- (largeur>hauteur) meet --> <rect x="0" y="0" width="20" height="10"> <title>xMidYMid meet</title> </rect> @@ -164,7 +129,11 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio </svg> </svg></pre> -<pre class="brush: css">path { + +<pre class="brush: css hidden"> +html,body,svg { height:100% } + +path { fill: yellow; stroke: black; stroke-width: 8px; @@ -176,7 +145,6 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio rect:hover, rect:active { outline: 1px solid red; }</pre> -</div> <p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> |