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/element/a/index.html | 146 +++++++++++ files/pt-br/web/svg/element/altglyph/index.html | 113 ++++++++ files/pt-br/web/svg/element/altglyphdef/index.html | 42 +++ .../pt-br/web/svg/element/altglyphitem/index.html | 43 +++ files/pt-br/web/svg/element/animate/index.html | 102 ++++++++ .../pt-br/web/svg/element/animatecolor/index.html | 59 +++++ .../pt-br/web/svg/element/animatemotion/index.html | 56 ++++ .../web/svg/element/animatetransform/index.html | 67 +++++ files/pt-br/web/svg/element/circle/index.html | 118 +++++++++ .../pt-br/web/svg/element/color-profile/index.html | 95 +++++++ files/pt-br/web/svg/element/defs/index.html | 116 +++++++++ files/pt-br/web/svg/element/desc/index.html | 94 +++++++ files/pt-br/web/svg/element/ellipse/index.html | 110 ++++++++ files/pt-br/web/svg/element/filter/index.html | 124 +++++++++ files/pt-br/web/svg/element/g/index.html | 61 +++++ files/pt-br/web/svg/element/glyph/index.html | 87 +++++++ files/pt-br/web/svg/element/glyphref/index.html | 103 ++++++++ files/pt-br/web/svg/element/hkern/index.html | 48 ++++ files/pt-br/web/svg/element/image/index.html | 102 ++++++++ files/pt-br/web/svg/element/index.html | 289 +++++++++++++++++++++ files/pt-br/web/svg/element/line/index.html | 118 +++++++++ .../web/svg/element/lineargradient/index.html | 113 ++++++++ files/pt-br/web/svg/element/marker/index.html | 103 ++++++++ files/pt-br/web/svg/element/mask/index.html | 55 ++++ files/pt-br/web/svg/element/metadata/index.html | 87 +++++++ .../pt-br/web/svg/element/missing-glyph/index.html | 51 ++++ files/pt-br/web/svg/element/mpath/index.html | 78 ++++++ files/pt-br/web/svg/element/path/index.html | 129 +++++++++ files/pt-br/web/svg/element/pattern/index.html | 53 ++++ files/pt-br/web/svg/element/polygon/index.html | 105 ++++++++ files/pt-br/web/svg/element/polyline/index.html | 105 ++++++++ .../web/svg/element/radialgradient/index.html | 114 ++++++++ files/pt-br/web/svg/element/rect/index.html | 117 +++++++++ files/pt-br/web/svg/element/script/index.html | 129 +++++++++ files/pt-br/web/svg/element/set/index.html | 48 ++++ files/pt-br/web/svg/element/stop/index.html | 124 +++++++++ files/pt-br/web/svg/element/style/index.html | 117 +++++++++ files/pt-br/web/svg/element/svg/index.html | 125 +++++++++ files/pt-br/web/svg/element/switch/index.html | 99 +++++++ files/pt-br/web/svg/element/symbol/index.html | 121 +++++++++ files/pt-br/web/svg/element/text/index.html | 122 +++++++++ files/pt-br/web/svg/element/textpath/index.html | 76 ++++++ files/pt-br/web/svg/element/title/index.html | 123 +++++++++ files/pt-br/web/svg/element/tref/index.html | 123 +++++++++ files/pt-br/web/svg/element/tspan/index.html | 112 ++++++++ files/pt-br/web/svg/element/use/index.html | 156 +++++++++++ files/pt-br/web/svg/element/view/index.html | 107 ++++++++ files/pt-br/web/svg/element/vkern/index.html | 50 ++++ 48 files changed, 4835 insertions(+) create mode 100644 files/pt-br/web/svg/element/a/index.html create mode 100644 files/pt-br/web/svg/element/altglyph/index.html create mode 100644 files/pt-br/web/svg/element/altglyphdef/index.html create mode 100644 files/pt-br/web/svg/element/altglyphitem/index.html create mode 100644 files/pt-br/web/svg/element/animate/index.html create mode 100644 files/pt-br/web/svg/element/animatecolor/index.html create mode 100644 files/pt-br/web/svg/element/animatemotion/index.html create mode 100644 files/pt-br/web/svg/element/animatetransform/index.html create mode 100644 files/pt-br/web/svg/element/circle/index.html create mode 100644 files/pt-br/web/svg/element/color-profile/index.html create mode 100644 files/pt-br/web/svg/element/defs/index.html create mode 100644 files/pt-br/web/svg/element/desc/index.html create mode 100644 files/pt-br/web/svg/element/ellipse/index.html create mode 100644 files/pt-br/web/svg/element/filter/index.html create mode 100644 files/pt-br/web/svg/element/g/index.html create mode 100644 files/pt-br/web/svg/element/glyph/index.html create mode 100644 files/pt-br/web/svg/element/glyphref/index.html create mode 100644 files/pt-br/web/svg/element/hkern/index.html create mode 100644 files/pt-br/web/svg/element/image/index.html create mode 100644 files/pt-br/web/svg/element/index.html create mode 100644 files/pt-br/web/svg/element/line/index.html create mode 100644 files/pt-br/web/svg/element/lineargradient/index.html create mode 100644 files/pt-br/web/svg/element/marker/index.html create mode 100644 files/pt-br/web/svg/element/mask/index.html create mode 100644 files/pt-br/web/svg/element/metadata/index.html create mode 100644 files/pt-br/web/svg/element/missing-glyph/index.html create mode 100644 files/pt-br/web/svg/element/mpath/index.html create mode 100644 files/pt-br/web/svg/element/path/index.html create mode 100644 files/pt-br/web/svg/element/pattern/index.html create mode 100644 files/pt-br/web/svg/element/polygon/index.html create mode 100644 files/pt-br/web/svg/element/polyline/index.html create mode 100644 files/pt-br/web/svg/element/radialgradient/index.html create mode 100644 files/pt-br/web/svg/element/rect/index.html create mode 100644 files/pt-br/web/svg/element/script/index.html create mode 100644 files/pt-br/web/svg/element/set/index.html create mode 100644 files/pt-br/web/svg/element/stop/index.html create mode 100644 files/pt-br/web/svg/element/style/index.html create mode 100644 files/pt-br/web/svg/element/svg/index.html create mode 100644 files/pt-br/web/svg/element/switch/index.html create mode 100644 files/pt-br/web/svg/element/symbol/index.html create mode 100644 files/pt-br/web/svg/element/text/index.html create mode 100644 files/pt-br/web/svg/element/textpath/index.html create mode 100644 files/pt-br/web/svg/element/title/index.html create mode 100644 files/pt-br/web/svg/element/tref/index.html create mode 100644 files/pt-br/web/svg/element/tspan/index.html create mode 100644 files/pt-br/web/svg/element/use/index.html create mode 100644 files/pt-br/web/svg/element/view/index.html create mode 100644 files/pt-br/web/svg/element/vkern/index.html (limited to 'files/pt-br/web/svg/element') diff --git a/files/pt-br/web/svg/element/a/index.html b/files/pt-br/web/svg/element/a/index.html new file mode 100644 index 0000000000..d55a659582 --- /dev/null +++ b/files/pt-br/web/svg/element/a/index.html @@ -0,0 +1,146 @@ +--- +title: a +slug: Web/SVG/Element/a +tags: + - Elemento + - SVG +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

O elemento <a> do SVG cria um hiperlink para outras páginas da web, arquivos, locais na mesma página, endereços de email ou qualquer outra URL. É muito semelhante ao elemento {{htmlelement ("a")}} do HTML.

+ +

O elemento <a> do SVG é um contêiner, o que significa que você pode criar um link em torno do texto (como em HTML), mas também em torno de qualquer elemento.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- A link around a shape -->
+  <a href="/docs/Web/SVG/Element/circle">
+    <circle cx="50" cy="40" r="35"/>
+  </a>
+
+  <!-- A link around a text -->
+  <a href="/docs/Web/SVG/Element/text">
+    <text x="50" y="90" text-anchor="middle">
+      &lt;circle&gt;
+    </text>
+  </a>
+</svg>
+ +
/* As SVG does not provide a default visual style for links,
+   it's considered best practice to add some */
+
+@namespace svg url(http://www.w3.org/2000/svg);
+/* Necessary to select only SVG <a> elements, and not also HTML’s.
+   See warning below */
+
+svg|a:link, svg|a:visited {
+  cursor: pointer;
+}
+
+svg|a text,
+text svg|a {
+  fill: blue; /* Even for text, SVG uses fill over color */
+  text-decoration: underline;
+}
+
+svg|a:hover, svg|a:active {
+  outline: dotted 1px blue;
+}
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+
+ +
+

Como esse elemento compartilha seu nome de tag com o elemento <a> do HTML, selecionar a com CSS ou querySelector, pode ser aplicar ao tipo errado de elemento. Experimente usar a regra @namespace para distinguir os dois.

+
+ +

Attributes

+ +
+
{{htmlattrxref("download", "a")}} {{experimental_inline}}
+
Instructs browsers to download a {{Glossary("URL")}} instead of navigating to it, so the user will be prompted to save it as a local file.
+ Value type: <string> ; Default value: none; Animatable: no
+
{{SVGAttr("href")}}
+
The {{Glossary("URL")}} or URL fragment the hyperlink points to.
+ Value type: <URL> ; Default value: none; Animatable: yes
+
{{htmlattrxref("hreflang", "a")}}
+
The human language of the URL or URL fragment that the hyperlink points to.
+ Value type: <string> ; Default value: none; Animatable: yes
+
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
+
A space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see Navigator.sendBeacon().
+ Value type: <list-of-URLs> ; Default value: none; Animatable: no
+
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
+
Which referrer to send when fetching the {{Glossary("URL")}}.
+ Value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Default value: none; Animatable: no
+
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
+
The relationship of the target object to the link object.
+ Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes
+
{{SVGAttr("target")}}
+
Where to display the linked {{Glossary("URL")}}.
+ Value type: _self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes
+
{{htmlattrxref("type", "a")}}
+
A {{Glossary("MIME type")}} for the linked URL.
+ Value type: <string> ; Default value: none; Animatable: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers.
+ Value type: <URL> ; Default value: none; Animatable: yes
+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Document element event attributes, Graphical event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink Attributes
+
Most notably: {{SVGAttr("xlink:title")}}
+
ARIA Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/pt-br/web/svg/element/altglyph/index.html b/files/pt-br/web/svg/element/altglyph/index.html new file mode 100644 index 0000000000..5c73b99f10 --- /dev/null +++ b/files/pt-br/web/svg/element/altglyph/index.html @@ -0,0 +1,113 @@ +--- +title: altGlyph +slug: Web/SVG/Element/altGlyph +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/altGlyph +--- +
{{SVGRef}}
+ +

O elemento altGlyph habilita a seleção sofisticada de símbolos utilizada para renderizar os dados de caractere de seu elemento filho.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGAltGlyphElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('2.0') }} [1]{{ CompatUnknown() }}{{ CompatOpera('10.6') }}{{ CompatSafari('4.0') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatGeckoMobile('2.0') }} [1]{{ CompatNo() }}{{ CompatOperaMobile('11.0') }}{{ CompatSafari('4.0') }}
+
+ +

[1] suporte parcial, veja bug 456286 e bug 571808.

+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/altglyphdef/index.html b/files/pt-br/web/svg/element/altglyphdef/index.html new file mode 100644 index 0000000000..6ae9ca105c --- /dev/null +++ b/files/pt-br/web/svg/element/altglyphdef/index.html @@ -0,0 +1,42 @@ +--- +title: altGlyphDef +slug: Web/SVG/Element/altGlyphDef +tags: + - Conteúdo Textual + - Elemento + - SVG +translation_of: Web/SVG/Element/altGlyphDef +--- +
{{SVGRef}}
+ +

O elemento altGlyphDef define a substituição representativa para os símbolos.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +

Nenhum

+ +

Interface DOM

+ +

Este elemento implementa a interface do SVGAltGlyphDefElement.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/altglyphitem/index.html b/files/pt-br/web/svg/element/altglyphitem/index.html new file mode 100644 index 0000000000..c228f2b243 --- /dev/null +++ b/files/pt-br/web/svg/element/altglyphitem/index.html @@ -0,0 +1,43 @@ +--- +title: altGlyphItem +slug: Web/SVG/Element/altGlyphItem +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/altGlyphItem +--- +
{{SVGRef}}
+ +

O elemento altGlyphItem fornece uma série de candidados para a substituição de símbolos através do elemento {{ SVGElement("altGlyph") }}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +

Nenhum

+ +

Interface DOM

+ +

Este elemento implementa a interface do SVGAltGlyphItemElement.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/animate/index.html b/files/pt-br/web/svg/element/animate/index.html new file mode 100644 index 0000000000..fc2ffb9191 --- /dev/null +++ b/files/pt-br/web/svg/element/animate/index.html @@ -0,0 +1,102 @@ +--- +title: animate +slug: Web/SVG/Element/animate +tags: + - Animação + - Elemento + - SVG +translation_of: Web/SVG/Element/animate +--- +
{{SVGRef}}
+ +

O elemento SVG <animate> fornece uma maneira de animar um atributo de um elemento ao longo do tempo.

+ +
+ + +
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect width="10" height="10">
+    <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
+  </rect>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 150, '100%')}}

+
+ +

Attributes

+ +

Animation Attributes

+ +
+
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")}}
+
Other Animation attributes
+
Most notably: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}
+
Animation event attributes
+
Most notably: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}
+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Event Attributes
+
Global event attributes, Document element event attributes
+
+ +

Usage notes

+ +

This element implements the {{domxref("SVGAnimateElement")}} interface.

+ +

Accessibility concerns

+ +

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

+ +

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

+ + + +

Specifications

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

Browser compatibility

+ +
+ + +

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

+
diff --git a/files/pt-br/web/svg/element/animatecolor/index.html b/files/pt-br/web/svg/element/animatecolor/index.html new file mode 100644 index 0000000000..a0161871b3 --- /dev/null +++ b/files/pt-br/web/svg/element/animatecolor/index.html @@ -0,0 +1,59 @@ +--- +title: animateColor +slug: Web/SVG/Element/animateColor +tags: + - Animação + - Elelemt + - Obsoleto + - SVG +translation_of: Web/SVG/Element/animateColor +--- +
{{SVGRef}}{{deprecated_header}}
+ +
+

Este elemento ficou obsoleto na Segunda Edição do SVG 1.1 e deverá ser removida das futuras versões do SVG. Este elemento fornece recursos ainda não disponíveis utilizando o elemento {{ SVGElement("animate") }} e não está implementado no Firefox e no Internet Explorer. Os autores devem utilizar o elemento {{ SVGElement("animate") }} em seu lugar.

+
+ +

O elemento animateColor especifica uma transformação de cor ao longo do tempo.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» animateColor.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGAnimateColorElement.

+ + + + diff --git a/files/pt-br/web/svg/element/animatemotion/index.html b/files/pt-br/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..b09127f599 --- /dev/null +++ b/files/pt-br/web/svg/element/animatemotion/index.html @@ -0,0 +1,56 @@ +--- +title: animateMotion +slug: Web/SVG/Element/animateMotion +tags: + - Animação + - Elemento + - Forma + - SVG +translation_of: Web/SVG/Element/animateMotion +--- +
{{SVGRef}}
+ +

O elemento animateMotion interfere em uma elemento referenciado para se mover ao longo de uma trajetória de movimento.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» animateMotion.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGAnimateMotionElement.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/animatetransform/index.html b/files/pt-br/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..b6e5408e2a --- /dev/null +++ b/files/pt-br/web/svg/element/animatetransform/index.html @@ -0,0 +1,67 @@ +--- +title: animateTransform +slug: Web/SVG/Element/animateTransform +tags: + - Animação + - Elemento + - SVG +translation_of: Web/SVG/Element/animateTransform +--- +
{{SVGRef}}
+ +

O elemento animateTransform anima a transformação de um atributo em um elemento alvo, permitindo assim as animações controlarem a movimentação, escala, rotação e/ou inclinação.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+    <polygon points="60,30 90,90 30,90">
+        <animateTransform attributeName="transform"
+                          attributeType="XML"
+                          type="rotate"
+                          from="0 60 70"
+                          to="360 60 70"
+                          dur="10s"
+                          repeatCount="indefinite"/>
+    </polygon>
+</svg>
+ +

Resultado

+ +

{{ EmbedLiveSample('Exemplo','120','120') }}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGAnimateTransformElement.

diff --git a/files/pt-br/web/svg/element/circle/index.html b/files/pt-br/web/svg/element/circle/index.html new file mode 100644 index 0000000000..52fc0253d8 --- /dev/null +++ b/files/pt-br/web/svg/element/circle/index.html @@ -0,0 +1,118 @@ +--- +title: circle +slug: Web/SVG/Element/circle +tags: + - Circulo + - Elemento + - Forma + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

O elemento circle é uma forma básica do SVG, utilizada para criar círculos baseado em um ponto central e um raio.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

 

+ +
<?xml version="1.0"?>
+<svg viewBox="0 0 120 120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="50"/>
+</svg>
+ +

 

+ +

» circle.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do {{ domxref("SVGCircleElement") }} interface.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/color-profile/index.html b/files/pt-br/web/svg/element/color-profile/index.html new file mode 100644 index 0000000000..be238bced6 --- /dev/null +++ b/files/pt-br/web/svg/element/color-profile/index.html @@ -0,0 +1,95 @@ +--- +title: color-profile +slug: Web/SVG/Element/color-profile +tags: + - Elemento + - Perfil de Cor + - Referencia + - SVG +translation_of: Web/SVG/Element/color-profile +--- +
{{SVGRef}}
+ +

O elemento permite descrever o perfil de cor utilizado para a imagem.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGColorProfileElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

A tabela é baseada nessas fontes.

diff --git a/files/pt-br/web/svg/element/defs/index.html b/files/pt-br/web/svg/element/defs/index.html new file mode 100644 index 0000000000..ed2d3031c1 --- /dev/null +++ b/files/pt-br/web/svg/element/defs/index.html @@ -0,0 +1,116 @@ +--- +title: defs +slug: Web/SVG/Element/defs +tags: + - Element + - Elemento + - SVG + - SVG Container + - tag +translation_of: Web/SVG/Element/defs +--- +
{{SVGRef}}
+ +

A especificação do SVG permite que objetos gráficos sejam definidos para reuso posteriormente. Recomenda-se que, sempre que possível, os elementos referenciados sejam definidos dentro da tag defs. A definição destes elementos dentro de uma tag defs promove o entendimento do conteúdo do SVG e, consequentemente, promove a acessibilidade. Elementos gráficos definidos dentro da tag defs não serão diretamente renderizados. Você pode utilizar a tag {{ SVGElement("use") }} para renderizar tais elementos na janela de visualização.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="80px" height="30px" viewBox="0 0 80 30"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="Gradient01">
+      <stop offset="20%" stop-color="#39F" />
+      <stop offset="90%" stop-color="#F3F" />
+    </linearGradient>
+  </defs>
+
+  <rect x="10" y="10" width="60" height="10"
+        fill="url(#Gradient01)"  />
+</svg>
+
+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +

Não existem atributos específicos

+ +

DOM Interface

+ +

Este elemento implementa a interface SVGDefsElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/desc/index.html b/files/pt-br/web/svg/element/desc/index.html new file mode 100644 index 0000000000..3807c057b9 --- /dev/null +++ b/files/pt-br/web/svg/element/desc/index.html @@ -0,0 +1,94 @@ +--- +title: desc +slug: Web/SVG/Element/desc +translation_of: Web/SVG/Element/desc +--- +
{{SVGRef}}
+ +

Cada elemento container ou elementos gráficos em um desenho SVG podem fornecer uma desc, string de descrição onde esta é somente textual. Quando o fragmento do documento SVG é renderizado como um SVG em uma mídia visual, elementos desc não são renderizados como parte da visualização gráfica. Alterne as exibições quando possível, tanto visual e auditiva, escolha a exibição do elemento desc mas não a exibição dos elementos path ou outros elementos gráficos. O elemento desc geralmente melhora a acessibilidade do documentos SVG.

+ +

Contexto de utilização

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +

Não existe especificação de atributos

+ +

Interface DOM

+ +

Este elemento implementa a interface SVGDescElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Observação: Geralmente não existe interface para este elemento.

+ +

A tabela é baseada nestas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/ellipse/index.html b/files/pt-br/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..a90bccedfd --- /dev/null +++ b/files/pt-br/web/svg/element/ellipse/index.html @@ -0,0 +1,110 @@ +--- +title: ellipse +slug: Web/SVG/Element/ellipse +tags: + - Elemento + - Forma + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/ellipse +--- +
{{SVGRef}}
+ +

O elemento ellipse é uma forma básica do SVG, utilizado para criar elipses baseado em uma coordenada central, tanto no raio x quanto no y.

+ +

As elipses são incapazes de especificar a orientação exatada dela mesma (se, por exemplo, você quiser desenha uma elipse inclinada a um ângulo de 45 graus), mas poderá ser rotacionada utilizando o atributo {{ SVGAttr("transform") }}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» ellipse.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGEllipseElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/filter/index.html b/files/pt-br/web/svg/element/filter/index.html new file mode 100644 index 0000000000..e666fe126d --- /dev/null +++ b/files/pt-br/web/svg/element/filter/index.html @@ -0,0 +1,124 @@ +--- +title: filter +slug: Web/SVG/Element/filter +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/filter +--- +
{{SVGRef}}
+ +

O elemento filter fornece um recipiente para operações de um filtro atômico . Isso nunca será renderizado diretamente. Um filtro é referenciado pela utilização do atributo {{ SVGAttr("filter") }} com destino de um elemento SVG.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGFilterElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('2.0') }}{{ CompatIE('10.0') }}9.0{{ CompatSafari('3.0') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile('2.0') }}{{ CompatNo() }}9.5{{ CompatSafari('3.0') }}[1]
+
+ +

[1] Existem alguns problemas pendentes em navegadores Webkit.

+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/g/index.html b/files/pt-br/web/svg/element/g/index.html new file mode 100644 index 0000000000..e83eecf1bc --- /dev/null +++ b/files/pt-br/web/svg/element/g/index.html @@ -0,0 +1,61 @@ +--- +title: g +slug: Web/SVG/Element/g +tags: + - Elemento + - Referencia + - SVG + - SVG Recipiente +translation_of: Web/SVG/Element/g +--- +
{{SVGRef}}
+ +

O elemento g é um recipiente utilizado para agrupar objetos. Transformações aplicadas no elemento g são repassadas para todos os seus elementos filhos. Atributos também são herdados por elementos filhos. Além disso, pode ser utilizado para definir objetos complexos que poderão ser referenciados mais tarde pelo elemento {{SVGElement("use")}}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 95 50"
+     xmlns="http://www.w3.org/2000/svg">
+  <g stroke="green" fill="white" stroke-width="5">
+    <circle cx="25" cy="25" r="15" />
+    <circle cx="40" cy="25" r="15" />
+    <circle cx="55" cy="25" r="15" />
+    <circle cx="70" cy="25" r="15" />
+  </g>
+</svg>
+
+ +

{{EmbedLiveSample("Exemplo",220,130)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +

There is no specific attributes

+ +

Interface DOM

+ +

Este elemento implementa a interface do SVGGElement.

+ +

Compatibilidade dos navegadores

+ + + +

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

diff --git a/files/pt-br/web/svg/element/glyph/index.html b/files/pt-br/web/svg/element/glyph/index.html new file mode 100644 index 0000000000..7d53098e41 --- /dev/null +++ b/files/pt-br/web/svg/element/glyph/index.html @@ -0,0 +1,87 @@ +--- +title: glyph +slug: Web/SVG/Element/glyph +tags: + - Conteúdo de Texto SVG + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/glyph +--- +
{{SVGRef}}
+ +

O glyph determina um único glifo em uma fonte SVG.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<?xml version="1.0" standalone="yes"?>
+<svg width="400px" height="300px" version="1.1"
+  xmlns = 'http://www.w3.org/2000/svg'>
+<!-- Exemplo copiado de http://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
+  <defs>
+
+    <font id="Font1" horiz-adv-x="1000">
+      <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+          units-per-em="1000" cap-height="600" x-height="400"
+          ascent="700" descent="300"
+          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+        <font-face-src>
+          <font-face-name name="Super Sans Bold"/>
+        </font-face-src>
+      </font-face>
+
+      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
+      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>
+
+    </font>
+  </defs>
+  <text x="100" y="100"
+           style="font-family: 'Super Sans', Helvetica, sans-serif;
+                  font-weight: bold; font-style: normal">Texto utilizando fonte embed@da!</text>
+</svg>
+
+
+
+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGGlyphElement.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/glyphref/index.html b/files/pt-br/web/svg/element/glyphref/index.html new file mode 100644 index 0000000000..d316889b40 --- /dev/null +++ b/files/pt-br/web/svg/element/glyphref/index.html @@ -0,0 +1,103 @@ +--- +title: glyphRef +slug: Web/SVG/Element/glyphRef +tags: + - Conteúdo de Texto SVG + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/glyphRef +--- +
{{SVGRef}}
+ +

O elemento glyphRef fornece um único glifo possível referenciando a substituição do {{ SVGElement("altGlyph") }}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGGlyphRefElement.

+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatOpera('9.80')}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ +sv diff --git a/files/pt-br/web/svg/element/hkern/index.html b/files/pt-br/web/svg/element/hkern/index.html new file mode 100644 index 0000000000..57911f74ae --- /dev/null +++ b/files/pt-br/web/svg/element/hkern/index.html @@ -0,0 +1,48 @@ +--- +title: hkern +slug: Web/SVG/Element/hkern +tags: + - Elemento + - Fonte SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/hkern +--- +
{{SVGRef}}
+ +

A distância horizontal entre dois glifos podem ser bem ajustados com um elemento hkern. Este processo é conhecido como Kerning.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGHKernElement.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/image/index.html b/files/pt-br/web/svg/element/image/index.html new file mode 100644 index 0000000000..b14010b60c --- /dev/null +++ b/files/pt-br/web/svg/element/image/index.html @@ -0,0 +1,102 @@ +--- +title: image +slug: Web/SVG/Element/image +tags: + - Elemento + - Gráficos SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/image +--- +
{{SVGRef}}
+ +

O elemento SVG <image> carrega imagens dentro de documentos SVG. Ele pode exibir arquivos {{glossary("raster image")}} ou outros arquivos SVG.

+ +

The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.

+ +

SVG files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try <use> with an external URL. To include SVG files and run scripts inside them, try <object> inside of <foreignObject>.

+ +
+

Note: The HTML spec defines <image> as a synonym for <img> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVG.

+
+ +

Usage context

+ +

{{svginfo}}

+ +

Attributes

+ +

Global attributes

+ + + +

Specific attributes

+ + + +

DOM Interface

+ +

<image> implements the {{domxref("SVGImageElement")}} interface.

+ +

Example

+ +

Basic rendering of a PNG image in SVG:

+ +

SVG

+ +
<svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
+</svg>
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 250, 260)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ImageElement', '<image>')}}{{Spec2('SVG2')}}Allows omitting height and width
{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/pt-br/web/svg/element/index.html b/files/pt-br/web/svg/element/index.html new file mode 100644 index 0000000000..bbd0f4f860 --- /dev/null +++ b/files/pt-br/web/svg/element/index.html @@ -0,0 +1,289 @@ +--- +title: Referência de elementos SVG +slug: Web/SVG/Element +tags: + - Desenho + - Design Responsivo + - Elementos + - Gráficos Vetoriais + - Referência SVG + - SVG + - 'l10n:prioridade' +translation_of: Web/SVG/Element +--- +

« SVG / SVG Attribute reference »

+ +

Os desenhos e imagens SVG são criados usando uma grande variedade de elementos dedicados a construção, desenho e leiaute de imagens e diagramas vetoriais. Aqui você encontrará documentação de referência para cada um dos elementos SVG.

+ +

Elementos SVG de A a Z

+ +
+

A

+ + + +

C

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

L

+ + + +

M

+ + + +

  P

+ + + +

  R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

Z

+ + +
+ +

Elementos SVG por Categoria

+ +

Elementos de animação

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}} , {{SVGElement("discard")}}, {{SVGElement("mpath")}} , {{SVGElement("set")}}

+ +

Formas básicas

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Elementos "container"

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+ +

Elementos descritivos

+ +

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+ +

Elementos de filtro simples

+ +

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}} , {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}}, {{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}} , {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+ +

Elementos de fonte

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+ +

Elementos de gradiente

+ +

{{SVGElement("linearGradient")}} , {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

Elementos gráficos

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}} , {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+ +

Elementos gráficos de referência

+ +

{{SVGElement("mesh")}}, {{SVGElement("use")}}

+ +

Elementos de iluminação

+ +

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+ +

Elementos nunca renderizados

+ +

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}

+ +

Elementos para pintura

+ +

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}

+ +

Elementos renderizáveis

+ +

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}

+ +

Elementos de forma

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Elementos estruturais

+ +

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+ +

Elementos de conteúdo textual

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Elementos filho de conteúdo textual

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Elementos sem categoria

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

+ +

Elementos obsoletos e descontinuados

+ +
+

Aviso: Esses são elementos SVG antigos que foram descontinuados e não devem ser usados. Você nunca deve usá-los em novos projetos e deve susbstituí-los em projetos antigos o mais rápido possível. Eles estão listados aqui apenas para fins informativos.

+
+ +

A

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}

+ +

C

+ +

{{SVGElement("cursor")}}

+ +

F

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}

+ +

G

+ +

{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}

+ +

H

+ +

{{SVGElement("hkern")}}

+ +

M

+ +

{{SVGElement("missing-glyph")}}

+ +

T

+ +

{{SVGElement("tref")}}

+ +

V

+ +

{{SVGElement("vkern")}}

+ +

Veja também

+ + + +

{{SVGRef}}

diff --git a/files/pt-br/web/svg/element/line/index.html b/files/pt-br/web/svg/element/line/index.html new file mode 100644 index 0000000000..e44efa9cd2 --- /dev/null +++ b/files/pt-br/web/svg/element/line/index.html @@ -0,0 +1,118 @@ +--- +title: line +slug: Web/SVG/Element/line +tags: + - Elemento + - Gráficos SVG + - Linha + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/line +--- +
{{SVGRef}}
+ +

O elemento line é uma forma básica do SVG, utilizada para criar uma linha conectando dois pontos.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» line.svg

+ +

Você também pode aplicar transformações para obter o mesmo resultado. Começando com uma linha normal,

+ +

» line1.svg

+ +

adicionar as opções de transformação para mudar a direção da linha:

+ +

» line2.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGLineElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/lineargradient/index.html b/files/pt-br/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..5e1c014d13 --- /dev/null +++ b/files/pt-br/web/svg/element/lineargradient/index.html @@ -0,0 +1,113 @@ +--- +title: linearGradient +slug: Web/SVG/Element/linearGradient +tags: + - Elemento + - Gradiente + - SVG +translation_of: Web/SVG/Element/linearGradient +--- +
{{SVGRef}}
+ +

O elemento linearGradient permite que os autores definam gradientes lineares para preenchimento (fill) ou contornos (stroke) de elementos gráficos.

+ +

Usage context

+ +

{{svginfo}}

+ +

Example

+ +

» linearGradient.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface SVGLinearGradientElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('9.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Esta tabela é baseada nestas fontes.

+ +

Notas específicas para WebKit

+ +

Navegadores baseados no Webkit não suportam spreadMethod (bug 5968) e interpolação de cores (bug 6034).

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/marker/index.html b/files/pt-br/web/svg/element/marker/index.html new file mode 100644 index 0000000000..2b6193ad7e --- /dev/null +++ b/files/pt-br/web/svg/element/marker/index.html @@ -0,0 +1,103 @@ +--- +title: marker +slug: Web/SVG/Element/marker +tags: + - Container SVG + - Elemento + - Referência(2) + - SVG +translation_of: Web/SVG/Element/marker +--- +
{{SVGRef}}
+ +

O elemento marker define os gráficos quem devem ser usados para desenhar setas or polymarkers em um determinado elemento {{ SVGElement("path") }}, {{ SVGElement("line") }}, {{ SVGElement("polyline") }} ou {{ SVGElement("polygon") }}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» marker.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGMarkerElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico{{ CompatChrome('1.0') }}{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('9.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

diff --git a/files/pt-br/web/svg/element/mask/index.html b/files/pt-br/web/svg/element/mask/index.html new file mode 100644 index 0000000000..ef56bbe797 --- /dev/null +++ b/files/pt-br/web/svg/element/mask/index.html @@ -0,0 +1,55 @@ +--- +title: mask +slug: Web/SVG/Element/mask +tags: + - Container SVG + - Elemento + - Referência(2) + - SVG +translation_of: Web/SVG/Element/mask +--- +
{{SVGRef}}
+ +

No SVG, você pode especificar que quaisquer outros objetos gráficos ou elementos {{ SVGElement("g") }} podem ser utilizados com uma máscar de alfa para a composição do objeto atual para o fundo. A mask is defined with the mask element. A máscara é usada/referenciada usando a propriedade {{ SVGAttr("mask") }}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» mask.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGMaskElement.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/metadata/index.html b/files/pt-br/web/svg/element/metadata/index.html new file mode 100644 index 0000000000..f91ee9fd9b --- /dev/null +++ b/files/pt-br/web/svg/element/metadata/index.html @@ -0,0 +1,87 @@ +--- +title: metadata +slug: Web/SVG/Element/metadata +tags: + - Elemento + - Referencia + - SVG + - SVG Descritivo +translation_of: Web/SVG/Element/metadata +--- +
{{SVGRef}}
+ +

Metadados são dados estruturados sobre dados. Metadados que são incluídos com um conteúdo SVG devem ser especificados com um elemento metadata. O conteúdo do metadata devem ser elementos de outros namespaces XML tais como RDF, FOAF, etc.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +

Não existem atributos específicos

+ +

Interface DOM

+ +

Este elemento implementa a interface do SVGMetadataElement.

+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('8.0')}}{{CompatSafari('3.0.4')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatAndroid('3.0')}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
+
+ +

A tabela é baseada nessas fontes.

diff --git a/files/pt-br/web/svg/element/missing-glyph/index.html b/files/pt-br/web/svg/element/missing-glyph/index.html new file mode 100644 index 0000000000..216eaff176 --- /dev/null +++ b/files/pt-br/web/svg/element/missing-glyph/index.html @@ -0,0 +1,51 @@ +--- +title: missing-glyph +slug: Web/SVG/Element/missing-glyph +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/missing-glyph +--- +
{{SVGRef}}
+ +

O conteúdo do missing-glyph é renderizado se, para um determinado caractere, não foi determinado um {{ SVGElement("glyph") }} apropriado.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGMissingGlyphElement.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/mpath/index.html b/files/pt-br/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..c79fc56e21 --- /dev/null +++ b/files/pt-br/web/svg/element/mpath/index.html @@ -0,0 +1,78 @@ +--- +title: mpath +slug: Web/SVG/Element/mpath +tags: + - Animação + - Caminho + - Contorno + - Elemento + - Movimento + - Referencia + - SVG +translation_of: Web/SVG/Element/mpath +--- +
{{SVGRef}}
+ +

O sub elemento mpath do elemento {{ SVGElement("animateMotion") }} fornece a habilidade de referenciar um elemento externo {{ SVGElement("path") }} como uma definição de um caminho de movimento.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%"  viewBox="0 0 500 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+  <rect x="1" y="1" width="498" height="298"
+        fill="none" stroke="blue" stroke-width="2" />
+
+  <!-- Desenha o contorno da trajetória de movimento em azul, ao longo, com três pequenos círculos: inicio, meio e fim. -->
+  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
+        fill="none" stroke="blue" stroke-width="7.06"  />
+  <circle cx="100" cy="250" r="17.64" fill="blue"  />
+  <circle cx="250" cy="100" r="17.64" fill="blue"  />
+  <circle cx="400" cy="250" r="17.64" fill="blue"  />
+
+  <!-- Aqui temos um triângulo que andará sobre o caminho do movimento.
+       Define-se com uma orientação vertical com base no triângulo horizontalmente centralizado logo acima da origem. -->
+  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+        fill="yellow" stroke="red" stroke-width="7.06"  >
+    <!-- Define o caminho de movimento da animação -->
+    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
+       <mpath xlink:href="#path1"/>
+    </animateMotion>
+  </path>
+</svg>
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Example",250,165)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGMPathElement.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/path/index.html b/files/pt-br/web/svg/element/path/index.html new file mode 100644 index 0000000000..6945faad81 --- /dev/null +++ b/files/pt-br/web/svg/element/path/index.html @@ -0,0 +1,129 @@ +--- +title: path +slug: Web/SVG/Element/path +tags: + - Caminho + - Elemento + - Forma + - Path + - Referencia + - SVG + - graficos +translation_of: Web/SVG/Element/path +--- +
{{SVGRef}}
+ +
Primeiros passos
+Este tutorial irá te ajudar a utilizar caminhos no SVG.
+ +

Resumo

+ +

O elemento path é um elemento genérico para definir uma forma. Todas as formas básicas poderão ser criadas com elemento de caminho.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 400 400"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M 100 100 L 300 100 L 200 300 z"
+        fill="orange" stroke="black" stroke-width="3" />
+</svg>
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Exemplo",200,215)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interace do SVGPathElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Esta tabela é baseada nestas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/pattern/index.html b/files/pt-br/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..bb03db0c24 --- /dev/null +++ b/files/pt-br/web/svg/element/pattern/index.html @@ -0,0 +1,53 @@ +--- +title: pattern +slug: Web/SVG/Element/pattern +tags: + - Elemento + - Referência(2) + - SVG +translation_of: Web/SVG/Element/pattern +--- +
{{SVGRef}}
+ +

Um padrão é utilizado para preenchimento ou traçado de um objeto utilizando um objeto gráfico pré-definido o qual pode ser replicado ("ladrilhado") com intervalos fixados em x e y para cobrir as áreas que serão pintadas. Padrões são definidos utilizando o elemento pattern e, em seguida, referenciado pelas propriedades fill e stroke em um determinado elemento gráfico para indicar que o elemento em questão deveria ser preenchido ou traçado com o padrão referenciado.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» pattern.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGPatternElement.

diff --git a/files/pt-br/web/svg/element/polygon/index.html b/files/pt-br/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..1221b126f9 --- /dev/null +++ b/files/pt-br/web/svg/element/polygon/index.html @@ -0,0 +1,105 @@ +--- +title: polygon +slug: Web/SVG/Element/polygon +tags: + - Elemento + - Gráficos SVG + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/polygon +--- +
{{SVGRef}}
+ +

O elemento polygon define uma forma fechada que consiste em um conjunto de segmentos de linha reta reta ligados.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» polygon.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGPolygonElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico{{ CompatChrome('1.0') }}{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/polyline/index.html b/files/pt-br/web/svg/element/polyline/index.html new file mode 100644 index 0000000000..ae32e3dc96 --- /dev/null +++ b/files/pt-br/web/svg/element/polyline/index.html @@ -0,0 +1,105 @@ +--- +title: polyline +slug: Web/SVG/Element/polyline +tags: + - Elemento + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/polyline +--- +
{{SVGRef}}
+ +

O elemento polyline é uma forma básica do SVG, utilizado para criar uma séries de linhas retas conectando vários pontos. Tipicamente um polyline é usado para criar formas abertas.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» polyline.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGPolylineElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico{{ CompatChrome('1.0') }}{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/radialgradient/index.html b/files/pt-br/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..19e42a227e --- /dev/null +++ b/files/pt-br/web/svg/element/radialgradient/index.html @@ -0,0 +1,114 @@ +--- +title: radialGradient +slug: Web/SVG/Element/radialGradient +tags: + - Elemento + - Gradiente SVG + - Referência(2) + - SVG +translation_of: Web/SVG/Element/radialGradient +--- +
{{SVGRef}}
+ +

radialGradient permite que autores definam gradientes radiais para preencher ou tracejar elementos gráficos

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

» radialGradient.svg

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGRadialGradientElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico{{ CompatChrome('1.0') }}{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('9.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nessas fontes.

+ +

Notas específicas WebKit

+ +

WebKit não suporta interpolação de cor (bug 6034).

+ +

Relacionado

+ + diff --git a/files/pt-br/web/svg/element/rect/index.html b/files/pt-br/web/svg/element/rect/index.html new file mode 100644 index 0000000000..ebcfd18574 --- /dev/null +++ b/files/pt-br/web/svg/element/rect/index.html @@ -0,0 +1,117 @@ +--- +title: rect +slug: Web/SVG/Element/rect +tags: + - Elemento + - Gráficos SVG + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

O elemento <rect> é uma forma SVG básica que desenha retângulos, definidos por sua posição, largura e altura. Os retângulos podem ter seus cantos arredondados.

+ +
+ + +
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simple rectangle -->
+  <rect width="100" height="100" />
+
+  <!-- Rounded corner rectangle -->
+  <rect x="120" width="100" height="100" rx="15" />
+</svg>
+ +

{{EmbedLiveSample('Example', 100, '100%')}}

+
+ +

Attributes

+ +
+
{{SVGAttr("x")}}
+
The x coordinate of the rect.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("y")}}
+
The y coordinate of the rect.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("width")}}
+
The width of the rect.
+ Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("height")}}
+
The height of the rect.
+ Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("rx")}}
+
The horizontal corner radius of the rect. Defaults to ry if it is specified.
+ Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("ry")}}
+
The vertical corner radius of the rect. Defaults to rx if it is specified.
+ Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("pathLength")}}
+
The total length of the rectangle's perimeter, in user units.
+ Value type: <number> ; Default value: none; Animatable: yes
+
+ +
+

Note: Starting with SVG2, x, y, width, height, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#RectElement', '<rect>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#RectElement', '<rect>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pt-br/web/svg/element/script/index.html b/files/pt-br/web/svg/element/script/index.html new file mode 100644 index 0000000000..7468e98706 --- /dev/null +++ b/files/pt-br/web/svg/element/script/index.html @@ -0,0 +1,129 @@ +--- +title: script +slug: Web/SVG/Element/script +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/script +--- +

Um elemento script é equivalente a um elemento script em HTML e, portanto, é o lugar para os scripts (por exemplo, ECMAScript).

+ +

Quaisquer funções definidas dentro de qualquer elemento script tem um escopo global em todo o documento atual.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

O seguinte trecho de código demonstra o uso da tag script do SVG. Neste código, nós usamos o JavaScript para alterar o raio do elemento SVG {{SVGElement("circle")}}.

+ +
<svg width="100%" height="100%" viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg">
+  <script type="text/javascript">
+    // <![CDATA[
+    function change(evt) {
+      var target = evt.target;
+      var radius = target.getAttribute("r");
+
+      if (radius == 15) {
+        radius = 45;
+      } else {
+        radius = 15;
+      }
+
+      target.setAttribute("r",radius);
+   }
+   // ]]>
+  </script>
+
+  <circle cx="50" cy="50" r="45" fill="green"
+          onclick="change(evt)" />
+</svg>
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Exemplo",150,165)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

DOM interface

+ +

Este elemento implementa a interface do SVGScriptElement.

+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('9.0')}}{{CompatSafari('3.0.4')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatAndroid('3.0')}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
+
+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + + +

{{SVGRef}}

diff --git a/files/pt-br/web/svg/element/set/index.html b/files/pt-br/web/svg/element/set/index.html new file mode 100644 index 0000000000..d09faa0049 --- /dev/null +++ b/files/pt-br/web/svg/element/set/index.html @@ -0,0 +1,48 @@ +--- +title: set +slug: Web/SVG/Element/set +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/set +--- +
{{SVGRef}}
+ +

O elemento set fornece um meio simples para apenas definir o valor de um atributo para uma duração específica. Todos os tipos de atributos são suportados, incluindo aqueles que não podem ser razoavelmente interpolado, como uma string ou valores booleanos. O elemento set não é aditivo. Atributos aditivos e acumulados não são permitidos e serão ignorados se especificado.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGSetElement.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/stop/index.html b/files/pt-br/web/svg/element/stop/index.html new file mode 100644 index 0000000000..ab2819bf3e --- /dev/null +++ b/files/pt-br/web/svg/element/stop/index.html @@ -0,0 +1,124 @@ +--- +title: stop +slug: Web/SVG/Element/stop +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/stop +--- +
{{SVGRef}}
+ +

A rampa de cores para utilizar em um gradiente é definido pelo elemento stop que é elemento filho do elemento {{SVGElement("linearGradient")}} ou do elemento {{SVGElement("radialGradient")}}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 80 40"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="MyGradient">
+      <stop offset="5%" stop-color="#F60" />
+      <stop offset="95%" stop-color="#FF6" />
+    </linearGradient>
+  </defs>
+
+  <!-- Outline the drawing area in black -->
+  <rect fill="none" stroke="black"
+        x="0.5" y="0.5" width="79" height="39"/>
+
+  <!-- The rectangle is filled using a linear gradient -->
+  <rect fill="url(#MyGradient)" stroke="black" stroke-width="1"
+        x="10" y="10" width="60" height="20"/>
+</svg>
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Exemplo",160,95)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGStopElement.

+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)IEOperaSafari
Suporte básico{{CompatIE('1.0')}}{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('9.0')}}{{CompatSafari('3.0.4')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatAndroid('3.0')}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
+
+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/style/index.html b/files/pt-br/web/svg/element/style/index.html new file mode 100644 index 0000000000..c68e13cfde --- /dev/null +++ b/files/pt-br/web/svg/element/style/index.html @@ -0,0 +1,117 @@ +--- +title: style +slug: Web/SVG/Element/style +tags: + - Elemento + - Estilo + - Referencia + - SVG +translation_of: Web/SVG/Element/style +--- +
{{SVGRef}}
+ +

O elemento de estilo possibilita que folhas de estilos sejam incorporadas diretamente ao conteúdo do SVG. O elemento style do SVG possui os mesmos atributos que o elemento correspondente no HTML (veja o elemento no HTML {{ HTMLElement("style") }}).

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg">
+  <style>
+    /* <![CDATA[ */
+    circle {
+      fill: orange;
+      stroke: black;
+      stroke-width: 10px; // Note que este valor depende do valor do pixel definido no viewBox
+    }
+    /* ]]> */
+  </style>
+
+  <circle cx="50" cy="50" r="40" />
+</svg>
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Exemplo",150,165)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

O elemento implementa a interface do SVGStyleElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('9.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

A tabela é baseada nestas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/svg/index.html b/files/pt-br/web/svg/element/svg/index.html new file mode 100644 index 0000000000..5a460fab5b --- /dev/null +++ b/files/pt-br/web/svg/element/svg/index.html @@ -0,0 +1,125 @@ +--- +title: svg +slug: Web/SVG/Element/svg +tags: + - Elemento + - Fragmento + - Referencia + - SVG + - SVG Container +translation_of: Web/SVG/Element/svg +--- +
{{SVGRef}}
+ +

O elemento svg é um contêiner que define um novo sistema de coordenadas e janela de visualização. É usado como o elemento mais externo dos documentos SVG, mas também pode ser usado para incorporar um fragmento SVG dentro de um documento SVG ou HTML.

+ +
+

Note: The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.

+
+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
+  <circle cx="50" cy="50" r="40" />
+  <circle cx="150" cy="50" r="4" />
+
+  <svg viewBox="0 0 10 10" x="200" width="100">
+    <circle cx="5" cy="5" r="4" />
+  </svg>
+</svg>
+ +

{{EmbedLiveSample('Exeemple', 150, '100%')}}

+
+ +

Attributes

+ +
+
{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}
+
The minimum SVG language profile that the document requires.
+ Value type: <string> ; Default value: none; Animatable: no
+
{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}
+
The default scripting language used by the SVG fragment.
+ Value type: <string> ; Default value: application/ecmascript; Animatable: no
+
{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}
+
The default style sheet language used by the SVG fragment.
+ Value type: <string> ; Default value: text/css; Animatable: no
+
{{SVGAttr("height")}}
+
The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("preserveAspectRatio")}}
+
How the svg fragment must be deformed if it is displayed with a different aspect ratio.
+ Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
+
{{SVGAttr("version")}} {{deprecated_inline('svg2')}}
+
Which version of SVG is used for the inner content of the element.
+ Value type: <number> ; Default value: none; Animatable: no
+
{{SVGAttr("viewBox")}}
+
The SVG viewport coordinates for the current SVG fragment.
+ Value type: <list-of-numbers> ; Default value: none; Animatable: yes
+
{{SVGAttr("width")}}
+
The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("x")}}
+
The displayed x coordinate of the svg container. No effect on outermost svg elements.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("y")}}
+
The displayed y coordinate of the svg container. No effect on outermost svg elements.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +
+

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties.

+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/pt-br/web/svg/element/switch/index.html b/files/pt-br/web/svg/element/switch/index.html new file mode 100644 index 0000000000..8bae2a9130 --- /dev/null +++ b/files/pt-br/web/svg/element/switch/index.html @@ -0,0 +1,99 @@ +--- +title: switch +slug: Web/SVG/Element/switch +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/switch +--- +
{{SVGRef}}
+ +

O elemento switch avalia os atributos {{SVGAttr("requiredFeatures")}}, {{SVGAttr("requiredExtensions")}} e o {{SVGAttr("systemLanguage")}} diretamente nos seus elementos filhos em ordem e, em seguida, processa e renderiza o primeiro filho que possua este atributo definido como verdadeiro. Todos os outros serão ignorados e, portanto, não renderizados. Se o elemento filho é um elemento recipiente como o {{SVGElement("g")}}, então toda a subárvore será ou processada/renderizada ou ignorada/não renderizada.

+ +

Observe que os valores das propriedades display e visibility não possuem efeitos sob o processamento do elemento switch. Em particular, definindo display como none em um filho de um elemento switch não possuirá efeito sob o teste de verdadeiro/falso associado com o processamento de um elemento switch.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGSwitchElement.

+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.01.89.08.03.0.4
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico3.0{{CompatUnknown}}1.8{{CompatNo}}{{CompatUnknown}}3.0.4
+
+ +

A tabela é baseada nessas fontes.

diff --git a/files/pt-br/web/svg/element/symbol/index.html b/files/pt-br/web/svg/element/symbol/index.html new file mode 100644 index 0000000000..0505aa623c --- /dev/null +++ b/files/pt-br/web/svg/element/symbol/index.html @@ -0,0 +1,121 @@ +--- +title: symbol +slug: Web/SVG/Element/symbol +tags: + - Container SVG + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/symbol +--- +
{{SVGRef}}
+ +

O elemento symbol é usado para definir um template que pode ser inicializado por um elemento {{ SVGElement("use") }}. A utilização de elementos symbol para gráficos que são usados várias vezes no mesmo documento acrescenta estrutura e semântica. Documentos que são ricos em estrutura podem ser renderizados graficamente, através da fala, ou do braille, e assim promover a acessibilidade. Note que o elemento symbol em si não é renderizado. Somente instâncias de um elemento symbol (por exemplo, uma referência à um elemento symbol feita por um elemento {{ SVGElement("use") }}) são renderizadas.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg>
+<!-- definição de symbol NUNCA é renderizada -->
+<symbol id="sym01" viewBox="0 0 150 110">
+  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
+  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
+</symbol>
+
+<!-- renderização por elementos "use" -->
+<use xlink:href="#sym01"
+     x="0" y="0" width="100" height="50"/>
+<use xlink:href="#sym01"
+     x="0" y="50" width="75" height="38"/>
+<use xlink:href="#sym01"
+     x="0" y="100" width="50" height="25"/>
+</svg>
+
+ +

{{EmbedLiveSample("Exemplo",150,110)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Esse elemento implementa a interface do SVGSymbolElement.

+ +

Compatibilidade

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('9.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Essa tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/text/index.html b/files/pt-br/web/svg/element/text/index.html new file mode 100644 index 0000000000..072c383cba --- /dev/null +++ b/files/pt-br/web/svg/element/text/index.html @@ -0,0 +1,122 @@ +--- +title: text +slug: Web/SVG/Element/text +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/text +--- +
{{SVGRef}}
+ +

O elemento SVG <text> desenha um elemento gráfico que consiste em texto. É possível aplicar um gradiente, pattern, clipping path, máscara ou filtro ao <text>, como qualquer outro elemento gráfico SVG.

+ +

If text is included in SVG not inside of a <text> element, it is not rendered. This is different than being hidden by default, as setting the {{SVGAttr('display')}} property won't show the text.

+ +
+ + +
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .small { font: italic 13px sans-serif; }
+    .heavy { font: bold 30px sans-serif; }
+
+    /* Note that the color of the text is set with the    *
+     * fill property, the color property is for HTML only */
+    .Rrrrr { font: italic 40px serif; fill: red; }
+  </style>
+
+  <text x="20" y="35" class="small">My</text>
+  <text x="40" y="35" class="heavy">cat</text>
+  <text x="55" y="55" class="small">is</text>
+  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
+</svg>
+ +

{{EmbedLiveSample('Example', 100, '100%')}}

+
+ +

Attributes

+ +
+
{{SVGAttr("x")}}
+
The x coordinate of the starting point of the text baseline.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("y")}}
+
The y coordinate of the starting point of the text baseline.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("dx")}}
+
Shifts the text position horizontally from a previous text element.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
{{SVGAttr("dy")}}
+
Shifts the text position vertically from a previous text element.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
{{SVGAttr("rotate")}}
+
Rotates orientation of each individual glyph. Can rotate glyphs individually.
+ Value type: <list-of-number> ; Default value: none; Animatable: yes
+
{{SVGAttr("lengthAdjust")}}
+
How the text is stretched or compressed to fit the width defined by the textLength attribute.
+ Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes
+
{{SVGAttr("textLength")}}
+
A width that the text should be scaled to fit.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('dominant-baseline')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{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("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'text.html#TextElement', '<text>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ + + + diff --git a/files/pt-br/web/svg/element/textpath/index.html b/files/pt-br/web/svg/element/textpath/index.html new file mode 100644 index 0000000000..aad3f76132 --- /dev/null +++ b/files/pt-br/web/svg/element/textpath/index.html @@ -0,0 +1,76 @@ +--- +title: textPath +slug: Web/SVG/Element/textPath +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/textPath +--- +
{{SVGRef}}
+ +

Assim como o texto escrito em uma linha reta, o SVG também inclui a capacidade de colocar um texto ao longo de uma forma de um elemento {{ SVGElement("path") }}. Para especificar que um bloco de texto é renderizado ao longo da forma de um  {{ SVGElement("path") }}, inclua o texto em um elemento textPath o qual inclui um atributo xlink:href com uma referência a um elemento {{ SVGElement("path") }}.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 1000 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <path id="MyPath"
+          d="M 100 200
+             C 200 100 300   0 400 100
+             C 500 200 600 300 700 200
+             C 800 100 900 100 900 100" />
+  </defs>
+
+  <use xlink:href="#MyPath" fill="none" stroke="red"  />
+
+  <text font-family="Verdana" font-size="42.5">
+    <textPath xlink:href="#MyPath">
+      Nós vamos para cima, para baixo, para cima
+    </textPath>
+  </text>
+
+  <!-- Show outline of the viewport using 'rect' element -->
+  <rect x="1" y="1" width="998" height="298"
+        fill="none" stroke="black" stroke-width="2" />
+</svg>
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Exemplo",500,175)}}

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGTextPathElement.

diff --git a/files/pt-br/web/svg/element/title/index.html b/files/pt-br/web/svg/element/title/index.html new file mode 100644 index 0000000000..2e549fe2c6 --- /dev/null +++ b/files/pt-br/web/svg/element/title/index.html @@ -0,0 +1,123 @@ +--- +title: title +slug: Web/SVG/Element/title +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/title +--- +
{{SVGRef}}
+ +

Cada elemento recipiente ou elemento gráfico em um desenho SVG pode fornecer uma descrição de title, onde esta descrição é de apenas texto. Quando o atual fragmento do documento SVG é renderizado em aparelhos audiovisuais, o elemento title não é renderizado como parte do gráfico. Entretanto, alguns agentes de usuários poderão, por exemplo, exibir o elemento title como uma dica. Apresentações alternativas são possíveis, tanto visual quanto auditiva, que exibem o elemento title mas não mostram o elemento path ou outros elementos gráficos. O elemento title geralmente aumenta a acessibilidade de documentos SVG.

+ +

Geralmente o elemento title deve ser o primeiro elemento filho de seu pai. Observe que estas implementações que utilizam o title para exibir uma dica, muitas vezes só o farão se o title for o primeiro elemento filho de seu pai.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

O seguinte trecho de código demonstra a utilização da tag SVG <title>.

+ +
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <title>Exemplo Demonstrativo de Título SVG</title>
+    <rect x="10" y="10" width="200" height="50"
+    style="fill:none; stroke:blue; stroke-width:1px"/>
+  </g>
+</svg>
+
+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ +

Não existem atributos específicos

+ +

Interface DOM

+ +

Este elemento implementa a interface do SVGTitleElement.

+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('8.0')}}{{CompatSafari('3.0.4')}}
Tooltip display{{CompatUnknown}}{{CompatGeckoDesktop('2.0')}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatAndroid('3.0')}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
Tooltip display{{CompatUnknown}}{{CompatGeckoDesktop('2.0')}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

A tabela é baseada nessas fontes.

+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/tref/index.html b/files/pt-br/web/svg/element/tref/index.html new file mode 100644 index 0000000000..3bb3de6878 --- /dev/null +++ b/files/pt-br/web/svg/element/tref/index.html @@ -0,0 +1,123 @@ +--- +title: tref +slug: Web/SVG/Element/tref +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/tref +--- +
{{SVGRef}}
+ +

O conteúdo textual para o {{ SVGElement("text") }} podem ser dados de caracteres diretamente embedados com o elemento {{ SVGElement("text") }} ou o conteúdo de dados de caracteres de um elemento referenciado, onde a referência é especificada com um elemento tref.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 1000 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <text id="ReferencedText">
+      Referenced character data
+    </text>
+  </defs>
+
+  <text x="100" y="100" font-size="45" >
+    Inline character data
+  </text>
+
+  <text x="100" y="200" font-size="45" fill="red" >
+    <tref xlink:href="#ReferencedText"/>
+  </text>
+
+  <!-- Show outline of canvas using 'rect' element -->
+  <rect x="1" y="1" width="998" height="298"
+        fill="none" stroke-width="2" />
+</svg>
+
+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGTRefElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/svg/element/tspan/index.html b/files/pt-br/web/svg/element/tspan/index.html new file mode 100644 index 0000000000..ae744d6174 --- /dev/null +++ b/files/pt-br/web/svg/element/tspan/index.html @@ -0,0 +1,112 @@ +--- +title: tspan +slug: Web/SVG/Element/tspan +tags: + - Conteúdo Textual + - Elemento + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/tspan +--- +
{{SVGRef}}
+ +

O elemento SVG <tspan> define um subtexto dentro de um elemento {{SVGElement ('text')}} ou outro elemento <tspan>. Permite o ajuste do estilo e / ou posição desse subtexto, conforme necessário.

+ +
+ + +
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    text  { font: italic 12px serif; }
+    tspan { font: bold 10px sans-serif; fill: red; }
+  </style>
+
+  <text x="10" y="30" class="small">
+    You are
+    <tspan>not</tspan>
+    a banana!
+  </text>
+</svg>
+ +

{{EmbedLiveSample('Example', 100, '100%')}}

+
+ +

Attributes

+ +
+
{{SVGAttr("x")}}
+
The x coordinate of the starting point of the text baseline.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
{{SVGAttr("y")}}
+
The y coordinate of the starting point of the text baseline.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
{{SVGAttr("dx")}}
+
Shifts the text position horizontally from a previous text element.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
{{SVGAttr("dy")}}
+
Shifts the text position vertically from a previous text element.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
{{SVGAttr("rotate")}}
+
Rotates orientation of each individual glyph. Can rotate glyphs individually.
+ Value type: <list-of-number> ; Default value: none; Animatable: yes
+
{{SVGAttr("lengthAdjust")}}
+
How the text is stretched or compressed to fit the width defined by the textLength attribute.
+ Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes
+
{{SVGAttr("textLength")}}
+
A width that the text should be scaled to fit.
+ Value type: <length>|<percentage> ; Default value: none; Animatable: yes
+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('dominant-baseline')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{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("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/pt-br/web/svg/element/use/index.html b/files/pt-br/web/svg/element/use/index.html new file mode 100644 index 0000000000..7502e54a6e --- /dev/null +++ b/files/pt-br/web/svg/element/use/index.html @@ -0,0 +1,156 @@ +--- +title: use +slug: Web/SVG/Element/use +tags: + - Elemento + - Gráficos(2) + - Referencia + - Referência(2) + - SVG + - graficos +translation_of: Web/SVG/Element/use +--- +
{{SVGRef}}
+ +

O elemento use cria instâncias dentro de um documento SVG e os duplica em outro local. O efeito é o mesmo se as instâncias forem profundamente clonadas em um DOM não exposto, e então coladas onde o elemento use está (muito parecido com elementos de template clonados no HTML5). Como as instâncias clonadas não são expostas, é preciso ter cuidado ao utilizar CSS para estilizar o elemento use e seus descendentes ocultos. Não há garantia de que atributos CSS sejam herdados pelo DOM oculto e clonado, a menos que você os solicite explicitamente usando herança CSS.

+ +

Por motivos de segurança alguns navegadores poderão aplicar uma política de "mesma origem" com elementos use, bem como poderão recusar o carregamento de uma URI de múltiplas origens no atributo xlink:href.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    .classA { fill:red }
+  </style>
+  <defs>
+    <g id="Port">
+      <circle style="fill:inherit" r="10"/>
+    </g>
+  </defs>
+
+  <text y="15">black</text>
+  <use x="50" y="10" xlink:href="#Port" />
+  <text y="35">red</text>
+  <use x="50" y="30" xlink:href="#Port" class="classA"/>
+  <text y="55">blue</text>
+  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
+ </svg>
+
+ +

 

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGUseElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from external URI{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{CompatNo()}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from data: URI{{ CompatUnknown() }}{{ CompatGeckoDesktop("10.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from external URI{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Load from data: URI{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/pt-br/web/svg/element/view/index.html b/files/pt-br/web/svg/element/view/index.html new file mode 100644 index 0000000000..7081544b10 --- /dev/null +++ b/files/pt-br/web/svg/element/view/index.html @@ -0,0 +1,107 @@ +--- +title: view +slug: Web/SVG/Element/view +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/view +--- +
{{SVGRef}}
+ +

Uma view é uma maneira definida de visualizar a imagem, como um nível de zoom ou uma visualização de detalhes.

+ +

Usage context

+ +

{{svginfo}}

+ +

Attributes

+ +

Global attributes

+ + + +

Specific attributes

+ + + +

Example

+ +

SVG

+ +
<svg width="600" height="200" viewBox="0 0 600 200"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <radialGradient id="gradient">
+      <stop offset="0%" stop-color="#8cffa0" />
+      <stop offset="100%" stop-color="#8ca0ff" />
+    </radialGradient>
+  </defs>
+
+  <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/>
+
+  <view id="halfSizeView" viewBox="0 0 1200 400"/>
+  <view id="normalSizeView" viewBox="0 0 600 200"/>
+  <view id="doubleSizeView" viewBox="0 0 300 100"/>
+
+  <a xlink:href="#halfSizeView">
+    <text x="5" y="20" font-size="20">half size</text>
+  </a>
+  <a xlink:href="#normalSizeView">
+    <text x="5" y="40" font-size="20">normal size</text>
+  </a>
+  <a xlink:href="#doubleSizeView">
+    <text x="5" y="60" font-size="20">double size</text>
+  </a>
+</svg>
+ +

Result

+ +

{{EmbedLiveSample("Example", 600, 200)}}

+ +

DOM Interface

+ +

This element implements the {{domxref("SVGViewElement")}} interface.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'linking.html#ViewElement', '<view>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'linking.html#ViewElement', '<view>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + + + +

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

diff --git a/files/pt-br/web/svg/element/vkern/index.html b/files/pt-br/web/svg/element/vkern/index.html new file mode 100644 index 0000000000..162e193643 --- /dev/null +++ b/files/pt-br/web/svg/element/vkern/index.html @@ -0,0 +1,50 @@ +--- +title: vkern +slug: Web/SVG/Element/vkern +tags: + - Elemento + - Fonte SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/vkern +--- +
{{SVGRef}}
+ +

A distância vertical entre dois glifos de fontes cima-para-baixo podem ser bem otimizadas com um elemento vkern. Esse processo é conhecido como Kerning.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGVKernElement.

+ +

Veja também

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