From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/svg/attribute/viewbox/index.html | 200 +++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 files/pt-br/web/svg/attribute/viewbox/index.html (limited to 'files/pt-br/web/svg/attribute/viewbox') 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 +--- +
{{SVGRef}}
+ +

O atributo viewBox define a posição e a dimensão, no espaço do usuário, de uma viewport SVG.

+ +

The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height. 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 browser viewport).

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

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

The exact effect of this attribute is influenced by the {{ SVGAttr("preserveAspectRatio") }} attribute.

+ +

Note: Values for width or height lower or equal to 0 disable rendering of the element.

+ +

Five elements are using this attribute: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, and {{ SVGElement("view") }}.

+ +

marker

+ +

For {{SVGElement('marker')}}, viewBox defines the position and dimension for the content of the <marker> element.

+ + + + + + + + + + + + + + + + +
Value<number>?, <number>?, <number>?, <number>
Default valuenone
AnimatableYes
+ +

pattern

+ +

For {{SVGElement('pattern')}}, viewBox defines the position and dimension for the content of the pattern tile.

+ + + + + + + + + + + + + + + + +
Value<number>?, <number>?, <number>?, <number>
Default valuenone
AnimatableYes
+ +

svg

+ +

For {{SVGElement('svg')}}, viewBox defines the position and dimension for the content of the <svg> element.

+ + + + + + + + + + + + + + + + +
Value<number>?, <number>?, <number>?, <number>
Default valuenone
AnimatableYes
+ +

symbol

+ +

For {{SVGElement('symbol')}}, viewBox defines the position and dimension for the content of the <symbol> element.

+ + + + + + + + + + + + + + + + +
Value<number>?, <number>?, <number>?, <number>
Default valuenone
AnimatableYes
+ +

view

+ +

For {{SVGElement('view')}}, viewBox defines the position and dimension for the content of the <view> element.

+ + + + + + + + + + + + + + + + +
Value<number>?, <number>?, <number>?, <number>
Default valuenone
AnimatableYes
+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "coords.html#ViewBoxAttribute", "viewBox")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "coords.html#ViewBoxAttribute", "viewBox")}}{{Spec2("SVG1.1")}}Initial definition
-- cgit v1.2.3-54-g00ecf