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/class/index.html | 195 +++++++++ .../web/svg/attribute/contentstyletype/index.html | 46 ++ files/pt-br/web/svg/attribute/fill/index.html | 461 ++++++++++++++++++++ files/pt-br/web/svg/attribute/index.html | 462 +++++++++++++++++++++ files/pt-br/web/svg/attribute/keytimes/index.html | 95 +++++ .../svg/attribute/preserveaspectratio/index.html | 420 +++++++++++++++++++ .../web/svg/attribute/stroke-dashoffset/index.html | 52 +++ files/pt-br/web/svg/attribute/stroke/index.html | 93 +++++ files/pt-br/web/svg/attribute/style/index.html | 75 ++++ files/pt-br/web/svg/attribute/version/index.html | 58 +++ files/pt-br/web/svg/attribute/viewbox/index.html | 200 +++++++++ files/pt-br/web/svg/attribute/width/index.html | 68 +++ 12 files changed, 2225 insertions(+) create mode 100644 files/pt-br/web/svg/attribute/class/index.html create mode 100644 files/pt-br/web/svg/attribute/contentstyletype/index.html create mode 100644 files/pt-br/web/svg/attribute/fill/index.html create mode 100644 files/pt-br/web/svg/attribute/index.html create mode 100644 files/pt-br/web/svg/attribute/keytimes/index.html create mode 100644 files/pt-br/web/svg/attribute/preserveaspectratio/index.html create mode 100644 files/pt-br/web/svg/attribute/stroke-dashoffset/index.html create mode 100644 files/pt-br/web/svg/attribute/stroke/index.html create mode 100644 files/pt-br/web/svg/attribute/style/index.html create mode 100644 files/pt-br/web/svg/attribute/version/index.html create mode 100644 files/pt-br/web/svg/attribute/viewbox/index.html create mode 100644 files/pt-br/web/svg/attribute/width/index.html (limited to 'files/pt-br/web/svg/attribute') diff --git a/files/pt-br/web/svg/attribute/class/index.html b/files/pt-br/web/svg/attribute/class/index.html new file mode 100644 index 0000000000..55fd46c6a0 --- /dev/null +++ b/files/pt-br/web/svg/attribute/class/index.html @@ -0,0 +1,195 @@ +--- +title: class +slug: Web/SVG/Attribute/class +tags: + - Atributos SVG + - Classe + - Referencia + - SVG +translation_of: Web/SVG/Attribute/class +--- +

« Página inicial da referência de atributos do SVG

+ +

Atribui um nome de classe ou um conjunto de nomes de classe a um elemento. Você pode atribuir o mesmo nome ou nomes de classe para qualquer número de elementos. Se você especificar vários nomes de classe, estes devem ser separados por caracteres de espaço em branco.

+ +

O nome de classe de um elemento tem duas funções principais:

+ + + +

A classe pode ser utilizada pra estilizar o conteúdo do SVG com CSS.

+ +

Utilização

+ + + + + + + + + + + + + + + + + + + + +
CategoriasNenhuma
Valor<list-of-class-names>
AnimávelSim
Documento normativoSVG 1.1 (2ª Edição): O atributo class
+ +

{{ page("/pt-BR/SVG/Content_type","List-of-Ts") }}

+ +

Exemplo

+ +
<html>
+    <body>
+  <svg width="120" height="220"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <style type="text/css" >
+      <![CDATA[
+
+        rect.rectClass {
+           stroke: #000066;
+           fill:   #00cc00;
+        }
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]>
+    </style>
+
+      <rect class="rectClass" x="10" y="10" width="100" height="100"/>
+     <circle  class="circleClass"   cx="40" cy="50" r="26"/>
+</svg>
+</body></html>
+ +

Elementos

+ +

Os seguintes elementos podem utilizar o atributo class:

+ +
+ +
+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico(yes){{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Suporte à animação{{ CompatUnknown() }}{{ CompatGeckoDesktop("5") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/pt-br/web/svg/attribute/contentstyletype/index.html b/files/pt-br/web/svg/attribute/contentstyletype/index.html new file mode 100644 index 0000000000..2de26d899b --- /dev/null +++ b/files/pt-br/web/svg/attribute/contentstyletype/index.html @@ -0,0 +1,46 @@ +--- +title: contentStyleType +slug: Web/SVG/Attribute/contentStyleType +tags: + - Atributo SVG + - Obsoleto + - SVG +translation_of: Web/SVG/Attribute/contentStyleType +--- +

« Página inicial de referência do atributo SVG

+ +

Este atributo especifica a linguagem da folha de estilo do fragmento do documento especificado. O contentStyleType é definido no elemento {{ SVGElement("svg") }}. Caso não seja definido, o valor padrão assumido será text/css.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
CategoriasNenhuma
Valor<content-type>
Animável?Não
Documento normativoSVG 1.1 (2ª Edição)
+ +

Uma vez que o CSS é a única linguagem de folha de estilos amplamente implementada para estilização online, bem como já está definida como valor padrão se o contentStyleType não estiver definido, o atributo não é bem suportado em motores de renderização. Se outra linguagem de folha de estilos se tornar mais popular, ela não poderá utilizar o atributo {{ SVGAttr("style") }}, ao invés disso, poderá ser facilmente declarada qual a linguagem de estilo está sendo utilizada através do atributo type da tag {{ SVGElement("style") }}.

+ +

Portanto, a utilização de contentStyleType está obsoleto.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/attribute/fill/index.html b/files/pt-br/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..55e63023a9 --- /dev/null +++ b/files/pt-br/web/svg/attribute/fill/index.html @@ -0,0 +1,461 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +tags: + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/fill +--- +
{{SVGRef}}
+ +
O atributo fill pode ter duas diferentes interpretações. Para formas e textos, é definido como um atributo de apresentação que define a cor (ou qualquer modelo de pintura SVG como gradientes ou padrões) utilizada para colorir um elemento; para animações ele é quem define o estado final de uma animação.
+ +
+ +

Como um atributo de apresentação, ele pode ser aplicado a qualquer elemento, mas só tem efeito nestes onze elementos seguintes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, e {{SVGElement('tspan')}}.

+ +

Para animação, apenas cinco elementos utilizam este atributo, sendo elas: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, e {{SVGElement('set')}}.

+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Preenchimento simples com apenas uma cor -->
+  <circle cx="50" cy="50" r="40" fill="pink" />
+
+
+  <!-- Preenchimento do circulo com gradiente -->
+  <defs>
+    <radialGradient id="myGradient">
+      <stop offset="0%"   stop-color="pink" />
+      <stop offset="100%" stop-color="black" />
+    </radialGradient>
+  </defs>
+
+  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />
+
+
+  <!--
+   Mantendo o estado final de um círculo animado
+   sendo um círculo com o raio de 40px.
+  -->
+  <circle cx="250" cy="50" r="20">
+    <animate attributeType="XML"
+             attributeName="r"
+             from="0" to="40" dur="5s"
+             fill="freeze" />
+  </circle>
+</svg>
+
+ +

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

+
+ +

altGlyph

+ +

Aviso: a partir da versão SVG2, a tag {{SVGElement('altGlyph')}} está obsoleta e não deve ser utilizada.

+ +

Para {{SVGElement('altGlyph')}}, fill é a apresentação do atributo que define a coloração de um glifo (figura, ícone, simbolo).

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

animate

+ +

Para {{SVGElement('animate')}}, o atributo fill define o estado final de uma animação.

+ + + + + + + + + + + + + + + + +
Valorfreeze (Mantém o estado do último quadro de animação) | remove (Mantém o estado do primeiro quadro de animação)
Valor Padrãoremove
AnimávelNão
+ +

animateColor

+ +

Aviso: A partir da versão de animação para modelos SVG2 {{SVGElement('animateColor')}} está obsoleto e não deve ser utilizado. Ao invés disso utilize {{SVGElement('animate')}}.

+ +

Para {{SVGElement('animateColor')}}, o atributo fill define o estado final de uma animação.

+ + + + + + + + + + + + + + + + +
Valorfreeze (Mantém o estado do último quadro de animação) | remove (Mantém o estado do primeiro quadro de animação)
Valor Padrãoremove
AnimávelNão
+ +

animateMotion

+ +

Para {{SVGElement('animateMotion')}}, o atributo fill define o estado final de uma animação.

+ + + + + + + + + + + + + + + + +
Valorfreeze (Mantém o estado do último quadro de animação) | remove (Mantém o estado do primeiro quadro de animação)
Valor Padrãoremove
AnimávelNão
+ +

animateTransform

+ +

Para {{SVGElement('animateTransform')}}, o atributo fill define o estado final de uma animação.

+ + + + + + + + + + + + + + + + +
Valorfreeze (Mantém o estado do último quadro de animação) | remove (Mantém o estado do primeiro quadro de animação)
Valor Padrãoremove
AnimávelNão
+ +

circle

+ +

Para {{SVGElement('circle')}}, fill é o atributo de apresentação utilizado para definir a coloração de um círculo.

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

ellipse

+ +

Para {{SVGElement('ellipse')}}, fill é o atributo de apresentação utilizado para definir a cor de uma elipse.

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

path

+ +

Para {{SVGElement('path')}}, fill é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo {{SVGAttr('fill-rule')}}).

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

polygon

+ +

Para {{SVGElement('polygon')}}, fill é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo {{SVGAttr('fill-rule')}}).

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

polyline

+ +

For {{SVGElement('polyline')}}, fill é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo {{SVGAttr('fill-rule')}}).

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

rect

+ +

Para {{SVGElement('rect')}}, fill é o atributo de apresentação utilizado para definir a cor de um retângulo.

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

set

+ +

Para {{SVGElement('set')}}, o atributo fill define o estado final de uma animação.

+ + + + + + + + + + + + + + + + +
Valorfreeze (Mantém o estado do último quadro de animação) | remove (Mantém o estado do primeiro quadro de animação)
Valor Padrãoremove
AnimávelNão
+ +

text

+ +

Para {{SVGElement('text')}}, fill é o atributo de apresentação utilizado para definir a cor de um texto.

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

textPath

+ +

For {{SVGElement('textPath')}}, fill é o atributo de apresentação utilizado para definir a cor de um texto

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

tref

+ +

Aviso: a partir da versão SVG2, a tag {{SVGElement('tref')}} está obsoleta e não deve ser utilizada.

+ +

Para {{SVGElement('tref')}}, fill é o atributo de apresentação utilizado para definir a cor de um texto

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

tspan

+ +

Para {{SVGElement('tspan')}}, fill é o atributo de apresentação utilizado para definir a cor de um texto

+ + + + + + + + + + + + + + + + +
Valor<paint>
Valor Padrãoblack
AnimávelSim
+ +

Nota: Por ser um atributo de apresentação, fill pode ser usado como uma propriedade CSS.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusNota
{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}{{Spec2("SVG Animations 2")}}Definição para animações
{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}{{Spec2("SVG2")}}Definição para formas e textos.
+ Adiciona context-fill e context-stroke.
{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}{{Spec2("SVG1.1")}}Definição inicial para animações
{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}{{Spec2("SVG1.1")}}Definição inicial para formas e textos.
+ +

Compatibilidade dos Browsers

+ + + +

{{Compat("svg.attributes.presentation.fill")}}

+ +

Nota: Para obter informações do uso do context-fill (e do context-stroke) de documentos HTML, consulte a documentação da propriedade não-padrão {{cssxref("-moz-context-properties")}} .

diff --git a/files/pt-br/web/svg/attribute/index.html b/files/pt-br/web/svg/attribute/index.html new file mode 100644 index 0000000000..2d55d41922 --- /dev/null +++ b/files/pt-br/web/svg/attribute/index.html @@ -0,0 +1,462 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - NeedsTranslation + - SVG + - SVG Attribute + - SVG Reference + - TopicStub +translation_of: Web/SVG/Attribute +--- +

« SVG / SVG Element reference »

+ +

SVG Attributes

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

Categories

+ +

Animation event attributes

+ +

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+ +

Animation attribute target attributes

+ +

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+ +

Animation timing attributes

+ +

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+ +

Animation value attributes

+ +

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}

+ +

Animation addition attributes

+ +

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+ +

Conditional processing attributes

+ +

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+ +

Core attributes

+ +

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}

+ +

Document event attributes

+ +

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}

+ +

Filter primitive attributes

+ +

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+ +

Graphical event attributes

+ +

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+ +

Presentation attributes

+ +
Note that all SVG presentation attributes can be used as CSS properties.
+ +

{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}

+ +

Transfer function attributes

+ +

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+ + + +

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

diff --git a/files/pt-br/web/svg/attribute/keytimes/index.html b/files/pt-br/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..5d2e3a2e46 --- /dev/null +++ b/files/pt-br/web/svg/attribute/keytimes/index.html @@ -0,0 +1,95 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +
{{SVGRef}}
+ +

O atributo keyTimes representa uma lista de valores de tempo usados ​​para controlar o ritmo da animação. Cada valor corresponde a um valor na lista de atributos {{SVGAttr("values")}} e define quando o valor é usado na animação. Cada valor de tempo na lista keyTimes é especificado como um valor de ponto flutuante entre 0 e 1 (inclusive), representando um deslocamento proporcional na duração do elemento de animação.

+ +

Four elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, and {{SVGElement("animateTransform")}}

+ +
+ + +
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="10" r="10">
+    <animate attributeName="cx" dur="4s" repeatCount="indefinite"
+        values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/>
+    <animate attributeName="cy" dur="4s" repeatCount="indefinite"
+        values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/>
+  </circle>
+</svg>
+ +

{{EmbedLiveSample("topExample", "200", "200")}}

+
+ +

Usage notes

+ + + + + + + + + + + + + + + + +
Value{{cssxref("number")}} [ ; {{cssxref("number")}} ]* ;?
Default valueNone
AnimatableNo
+ +

The value of the keyTimes attribute is a semicolon-separated list of values.

+ +

There must be exactly as many values in the keyTimes list as in the values list.

+ +

Each successive time value must be greater than or equal to the preceding time value.

+ +

The keyTimes list semantics depends upon the interpolation mode:

+ + + +

If the {{SVGAttr("calcMode")}} attribute is set to paced, the keyTimes attribute is ignored.

+ +

If the duration of the animation is indefinite, any keyTimes specification will be ignored.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG Animations 2", "#KeyTimesAttribute", "keyTimes")}}{{Spec2("SVG Animations 2")}}No change
{{SpecName("SVG1.1", "animate.html#KeyTimesAttribute", "keyTimes")}}{{Spec2("SVG1.1")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("svg.elements.animate.keyTimes")}}

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 +--- +
{{SVGRef}}
+ +

O atributo preserveAspectRatio indica como um elemento com uma viewBox, fornecendo uma determinada proporção deve se ajustar a uma viewport com uma proporção diferente.

+ +

Because the aspect ratio of an SVG image is defined by the {{SVGAttr('viewBox')}} attribute, if this attribute isn't set, the preserveAspectRatio attribute has no effect (with one exception, the {{SVGElement('image')}} element, as described below).

+ +

Example

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

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

+ +

Syntax

+ +
preserveAspectRatio="<align> [<meetOrSlice>]"
+ +

Its value is made of one or two keywords: A required alignment value and an optional "meet or slice" reference as described below:

+ +
+
Alignment value
+
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: +
    +
  • none
    + 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. Note that if <align> is none, then the optional <meetOrSlice> value is ignored.
    • +
  • xMinYMin - Force uniform scaling.
    + Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    + Align the <min-y> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.
    • +
  • xMidYMin - Force uniform scaling.
    + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    + Align the <min-y> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.
    • +
  • xMaxYMin - Force uniform scaling.
    + Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    + Align the <min-y> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.
    • +
  • xMinYMid - Force uniform scaling.
    + Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
    • +
  • xMidYMid (the default) - Force uniform scaling.
    + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
    • +
  • xMaxYMid - Force uniform scaling.
    + Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
    • +
  • xMinYMax - Force uniform scaling.
    + Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    + Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
    • +
  • xMidYMax - Force uniform scaling.
    + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    + Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
    • +
  • xMaxYMax - Force uniform scaling.
    + Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    + Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
    • +
+
+
Meet or slice reference
+
The meet or slice reference is optional and, if provided, must be one of the following keywords: +
    +
  • meet (the default) - Scale the graphic such that: +
      +
    • aspect ratio is preserved
      • +
    • the entire {{ SVGAttr("viewBox") }} is visible within the viewport
      • +
    • the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria
      • +
    + 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).
    • +
  • slice - Scale the graphic such that: +
      +
    • aspect ratio is preserved
      • +
    • the entire viewport is covered by the {{ SVGAttr("viewBox") }}
      • +
    • the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria
      • +
    + 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).
    • +
+
+
+ +

Elements

+ +

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

+ +

feImage

+ +

For {{SVGElement('feImage')}}, preserveAspectRatio defines how the referenced image should fit in the rectangle define by the <feImage> element.

+ + + + + + + + + + + + + + + + +
Value<align> <meetOrSlice>?
Default valuexMidYMid meet
AnimatableYes
+ +

image

+ +

For {{SVGElement('image')}}, preserveAspectRatio defines how the referenced image should fit in the rectangle define by the <image> element.

+ + + + + + + + + + + + + + + + +
Value<align> <meetOrSlice>?
Default valuexMidYMid meet
AnimatableYes
+ +

marker

+ +

For {{SVGElement('marker')}}, preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

+ + + + + + + + + + + + + + + + +
Value<align> <meetOrSlice>?
Default valuexMidYMid meet
AnimatableYes
+ +

pattern

+ +

For {{SVGElement('pattern')}}, preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

+ + + + + + + + + + + + + + + + +
Value<align> <meetOrSlice>?
Default valuexMidYMid meet
AnimatableYes
+ +

svg

+ +

For {{SVGElement('svg')}}, preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

+ + + + + + + + + + + + + + + + +
Value<align> <meetOrSlice>?
Default valuexMidYMid meet
AnimatableYes
+ +

symbol

+ +

For {{SVGElement('symbol')}}, preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

+ + + + + + + + + + + + + + + + +
Value<align> <meetOrSlice>?
Default valuexMidYMid meet
AnimatableYes
+ +

view

+ +

For {{SVGElement('view')}}, preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

+ + + + + + + + + + + + + + + + +
Value<align> <meetOrSlice>?
Default valuexMidYMid meet
AnimatableYes
+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}{{Spec2('Filters 1.0')}}
{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}{{Spec2("SVG1.1")}}Initial definition
diff --git a/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html b/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..cbc2224c56 --- /dev/null +++ b/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,52 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +tags: + - Animação SVG + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +

« SVG Attribute reference home

+ +

O atributo stroke-dashoffset especifica a distância entre o inicio traço e o fim.

+ +

Se a <percentage> for usada, o valor representará a porcentagem do viewport atual.

+ +

O valor pode ser negativo.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + + + + + +
CategoriasAtributo de Apresentação
Value<percentage> | <length> | inherit
Valor inicial0
AnimaçãoSim
Documento NormativoSVG 1.1 (2nd Edition)
+ +

Elementos

+ +

Os seguintes elementos podem utilizar o atributo stroke-dashoffset

+ + diff --git a/files/pt-br/web/svg/attribute/stroke/index.html b/files/pt-br/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..a930fb5f9e --- /dev/null +++ b/files/pt-br/web/svg/attribute/stroke/index.html @@ -0,0 +1,93 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/stroke +--- +
{{SVGRef}}
+ +

O atributo stroke é um atributo de apresentação que define a cor (ou qualquer SVG paint servers, como gradientes ou patterns) usado para pintar o contorno da forma;

+ +

Note: As a presentation attribute stroke can be used as a CSS property.

+ +

As a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simple color stroke -->
+  <circle cx="5" cy="5" r="4" fill="none"
+          stroke="green" />
+
+  <!-- Stroke a circle with a gradient -->
+  <defs>
+    <linearGradient id="myGradient">
+      <stop offset="0%"   stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </linearGradient>
+  </defs>
+
+  <circle cx="15" cy="5" r="4" fill="none"
+          stroke="url(#myGradient)" />
+</svg>
+
+ +

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

+
+ +

Usage notes

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valuenone
AnimatableYes
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}}{{Spec2("SVG2")}}Definition for shapes and texts.
+ Adds context-fill and context-stroke.
{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}{{Spec2("SVG1.1")}}Initial definition for shapes and texts
+ +

Browser compatibility

+ + + +

{{Compat("svg.attributes.presentation.stroke")}}

+ +

Note: For information on using the context-stroke (and context-fill) values from HTML documents, see the documentation for the non-standard {{cssxref("-moz-context-properties")}} property.

diff --git a/files/pt-br/web/svg/attribute/style/index.html b/files/pt-br/web/svg/attribute/style/index.html new file mode 100644 index 0000000000..f52028b64e --- /dev/null +++ b/files/pt-br/web/svg/attribute/style/index.html @@ -0,0 +1,75 @@ +--- +title: style +slug: Web/SVG/Attribute/style +tags: + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/style +--- +

« Página inicial de referência do atributo SVG

+ +

Este atributo especifica informação de estilo para o elemento atual. O atributo "style" especifica informação de estilo para um único elemento. As linguagem da folha de estilos para as regras de estilos em linhas é dada pelo valor do atributo {{ SVGAttr("contentStyleType") }} no elemento the {{ SVGElement("SVG") }}.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
CategoriasAtributo de apresentação
Valor<style>
Animável?Não
Documento NormativoSVG 1.1 (2ª Edição)
+ +
+
<style>
+
A sintaxe do estilo depende de uma linguagem de folha de estilos. Por padrão, se {{ SVGAttr("contentStyleType") }} não for definido, a linguagem da folha de estilo utilizada será a CSS.
+
+ +

Exemplo

+ +

O exemplo a seguir mostra a estilização de um retângulo com um atributo de estilo utilizando a linguagem de folha de estilos do CSS.

+ +
<svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
+  <rect height="300" width="600" x="200" y="100"
+     style="fill: red; stroke: blue; stroke-width: 3"/>
+</svg>
+
+ +

Elementos

+ +

Os seguintes elementos podem utilizar o atributo style

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/svg/attribute/version/index.html b/files/pt-br/web/svg/attribute/version/index.html new file mode 100644 index 0000000000..f1ff5c1b8c --- /dev/null +++ b/files/pt-br/web/svg/attribute/version/index.html @@ -0,0 +1,58 @@ +--- +title: version +slug: Web/SVG/Attribute/version +translation_of: Web/SVG/Attribute/version +--- +
{{SVGRef}}{{deprecated_header("SVG 2")}}
+ +

The version attribute is used to indicate what specification a SVG document conforms to. It is only allowed on the root {{SVGElement("svg")}} element. It is purely advisory and has no influence on rendering or processing.

+ +

While it is specified to accept any number, the only two valid choices are currently 1.0 and 1.1.

+ +
<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="80" height="80"/>
+</svg>
+ +

Usage notes

+ + + + + + + + + + + + + + + + +
Value<number>
Default valueNone
AnimatableNo
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG1.1", "struct.html#SVGElementVersionAttribute", "version")}}{{Spec2("SVG1.1")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("svg.elements.svg.version")}}

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
diff --git a/files/pt-br/web/svg/attribute/width/index.html b/files/pt-br/web/svg/attribute/width/index.html new file mode 100644 index 0000000000..8ad4954e83 --- /dev/null +++ b/files/pt-br/web/svg/attribute/width/index.html @@ -0,0 +1,68 @@ +--- +title: Width +slug: Web/SVG/Attribute/width +translation_of: Web/SVG/Attribute/width +--- +

« SVG Attribute reference home

+ +

Esse atributo indica  um compromimento horizontal no sistema de coordenadas do usuário. O efeito exato dessa coordenada, depende de cada elemento. Na maioria das vezes, representa a largura da região retangular do elemento de referência.

+ +

Esse atributo precisa ser especificado, exceto para o elemento {{ SVGElement("svg") }} onde o valor padrão é 100% (com exceção do elemento root {{ SVGElement("svg") }} que contém pais HTML). e o {{ SVGElement("filter") }} e {{ SVGElement("mask") }}, elementos que o valor padrão é 120%.

+ +

Contexto de Uso

+ + + + + + + + + + + + + + + + + + + + +
CategoriesNone
Value<length>
AnimatableYes
Normative documentSVG 1.1 (2nd Edition): foreignObject element
+ SVG 1.1 (2nd Edition): image element
+ SVG 1.1 (2nd Edition): pattern element
+ SVG 1.1 (2nd Edition): rect element
+ SVG 1.1 (2nd Edition): svg element
+ SVG 1.1 (2nd Edition): use element
+ SVG 1.1 (2nd Edition): Filter primitive
+ SVG 1.1 (2nd Edition): mask element
+ +

{{ page("/en/SVG/Content_type","Length") }}

+ +

Exemplo

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+ +

Elementos

+ +

Os seguintes elementos podem user o atributo witdh

+ + -- cgit v1.2.3-54-g00ecf