diff options
Diffstat (limited to 'files/pt-br/web/svg/attribute/viewbox/index.html')
| -rw-r--r-- | files/pt-br/web/svg/attribute/viewbox/index.html | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/files/pt-br/web/svg/attribute/viewbox/index.html b/files/pt-br/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..ae6afe273f --- /dev/null +++ b/files/pt-br/web/svg/attribute/viewbox/index.html @@ -0,0 +1,200 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +translation_of: Web/SVG/Attribute/viewBox +--- +<div>{{SVGRef}}</div> + +<p>O atributo <code><strong>viewBox</strong></code> define a posição e a dimensão, no espaço do usuário, de uma viewport SVG.</p> + +<p>The value of the <code>viewBox</code> attribute is a list of four numbers: <code><var>min-x</var></code>, <code><var>min-y</var></code>, <code><var>width</var></code> and <code><var>height</var></code>. The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the <a href="/en-US/docs/Glossary/viewport">browser viewport</a>).</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +svg:not(:root) { display: inline-block; }</pre> +</div> + +<pre class="brush: xml"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a large viewBox the circle looks small + as it is using user units for the r attribute: + 4 resolved against 100 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox` + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a small viewBox the circle looks large + as it is using user units for the r attribute: + 4 resolved against 10 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + The point of coordinate 0,0 is now in the center of the viewport, + and 100% is still resolve to a width or height of 10 user units so + the rectangle looks shifted to the bottom/right corner of the viewport + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + With the point of coordinate 0,0 in the center of the viewport the + value 50% is resolve to 5 which means the center of the circle is + in the bottom/right corner of the viewport. + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<p>The exact effect of this attribute is influenced by the {{ SVGAttr("preserveAspectRatio") }} attribute.</p> + +<p class="note"><strong>Note:</strong> Values for <code><var>width</var></code> or <code><var>height</var></code> lower or equal to <code>0</code> disable rendering of the element.</p> + +<p>Five elements are using this attribute: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, and {{ SVGElement("view") }}.</p> + +<h2 id="marker">marker</h2> + +<p>For {{SVGElement('marker')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><marker></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="pattern">pattern</h2> + +<p>For {{SVGElement('pattern')}}, <code>viewBox</code> defines the position and dimension for the content of the pattern tile.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="svg">svg</h2> + +<p>For {{SVGElement('svg')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><svg></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="symbol">symbol</h2> + +<p>For {{SVGElement('symbol')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><symbol></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="view">view</h2> + +<p>For {{SVGElement('view')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><view></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></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("SVG2", "coords.html#ViewBoxAttribute", "viewBox")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "coords.html#ViewBoxAttribute", "viewBox")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> |