initial commit

1 files changed, 420 insertions, 0 deletions

diff --git a/files/pt-br/web/svg/attribute/preserveaspectratio/index.html b/files/pt-br/web/svg/attribute/preserveaspectratio/index.html
new file mode 100644
index 0000000000..ee9351ad58
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/preserveaspectratio/index.html
@@ -0,0 +1,420 @@
+---
+title: preserveAspectRatio
+slug: Web/SVG/Attribute/preserveAspectRatio
+translation_of: Web/SVG/Attribute/preserveAspectRatio
+---
+<div>{{SVGRef}}</div>
+
+<p>O atributo <code><strong>preserveAspectRatio</strong></code> indica como um elemento com uma viewBox, fornecendo uma determinada proporção deve se ajustar a uma viewport com uma proporção diferente.</p>
+
+<p>Because the aspect ratio of an SVG image is defined by the {{SVGAttr('viewBox')}} attribute, if this attribute isn't set, the <code>preserveAspectRatio</code> attribute has no effect (<em>with one exception, the {{SVGElement('image')}} element, as described below</em>).</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+     &lt;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" /&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- (width&gt;height) meet --&gt;
+  &lt;svg preserveAspectRatio="xMidYMid meet"  x="0"   y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMinYMid meet"  x="25"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMaxYMid meet"  x="50"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&gt;height) slice --&gt;
+  &lt;svg preserveAspectRatio="xMidYMin slice" x="0"   y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid slice" x="25"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMax slice" x="50"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) meet --&gt;
+  &lt;svg preserveAspectRatio="xMidYMin meet"  x="75"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid meet"  x="90"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMax meet"  x="105" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) slice --&gt;
+  &lt;svg preserveAspectRatio="xMinYMid slice" x="120" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid slice" x="135" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMaxYMid slice" x="150" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- none --&gt;
+  &lt;svg preserveAspectRatio="none"           x="0"   y="30" viewBox="0 0 100 100" width="160" height="60"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<div class="hidden">
+<h6 id="topExample">topExample</h6>
+
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+
+<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+     &lt;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" /&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- (width&gt;height) meet --&gt;
+  &lt;rect x="0" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid meet" x="0" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="25" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMinYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMinYMid meet" x="25" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="50" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMaxYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMaxYMid meet" x="50" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&gt;height) slice --&gt;
+  &lt;rect x="0" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMin slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMin slice" x="0" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="25" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid slice" x="25" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="50" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMax slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMax slice" x="50" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) meet --&gt;
+  &lt;rect x="75" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMin meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMin meet" x="75" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="90" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid meet" x="90" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="105" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMax meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMax meet" x="105" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) slice --&gt;
+  &lt;rect x="120" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMinYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMinYMid slice" x="120" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="135" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid slice" x="135" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="150" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMaxYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMaxYMid slice" x="150" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- none --&gt;
+  &lt;rect x="0" y="30" width="160" height="60"&gt;
+    &lt;title&gt;none&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="160" height="60"
+       preserveAspectRatio="none" x="0" y="30"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;</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="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">preserveAspectRatio="&lt;align&gt; [&lt;meetOrSlice&gt;]"</pre>
+
+<p>Its value is made of one or two keywords: A required alignment value and an optional "meet or slice" reference as described below:</p>
+
+<dl>
+ <dt>Alignment value</dt>
+ <dd>The alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the {{ SVGAttr("viewBox") }} doesn't match the aspect ratio of the viewport. The alignment value must be one of the following keywords:
+ <ul>
+  <li><strong>none</strong><br>
+   Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. <em>Note that if </em><code>&lt;align&gt;</code><em> is </em><code>none</code><em>, then the optional </em><code>&lt;meetOrSlice&gt;</code><em> value is ignored</em>.</li>
+  <li><strong>xMinYMin</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
+  <li><strong>xMidYMin</strong> - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
+  <li><strong>xMaxYMin</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
+  <li><strong>xMinYMid</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMidYMid</strong> (the default) - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMaxYMid</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMinYMax</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+  <li><strong>xMidYMax</strong> - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+  <li><strong>xMaxYMax</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+ </ul>
+ </dd>
+ <dt>Meet or slice reference</dt>
+ <dd>The meet or slice reference is optional and, if provided, must be one of the following keywords:
+ <ul>
+  <li><strong>meet</strong> (<em>the default</em>) - Scale the graphic such that:
+   <ul>
+    <li>aspect ratio is preserved</li>
+    <li>the entire {{ SVGAttr("viewBox") }} is visible within the viewport</li>
+    <li>the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria</li>
+   </ul>
+   In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).</li>
+  <li><strong>slice</strong> - Scale the graphic such that:
+   <ul>
+    <li>aspect ratio is preserved</li>
+    <li>the entire viewport is covered by the {{ SVGAttr("viewBox") }}</li>
+    <li>the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria</li>
+   </ul>
+   In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Elements">Elements</h2>
+
+<p>Seven elements are using this attribute: {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("image")}}, {{SVGElement("feImage")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, and {{SVGElement("view")}}.</p>
+
+<h3 id="feImage">feImage</h3>
+
+<p>For {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code>&lt;feImage&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="image">image</h3>
+
+<p>For {{SVGElement('image')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code>&lt;image&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="marker">marker</h3>
+
+<p>For {{SVGElement('marker')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="pattern">pattern</h3>
+
+<p>For {{SVGElement('pattern')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="svg">svg</h3>
+
+<p>For {{SVGElement('svg')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="symbol">symbol</h3>
+
+<p>For {{SVGElement('symbol')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="view">view</h3>
+
+<p>For {{SVGElement('view')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</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>Initial definition</td>
+  </tr>
+ </tbody>
+</table>