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 +++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 files/pt-br/web/svg/element/a/index.html (limited to 'files/pt-br/web/svg/element/a/index.html') 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")}}

-- cgit v1.2.3-54-g00ecf