SVG <a> Elemento – Barcelona Geeks

El elemento “<a>” en SVG se usa para crear un hipervínculo a otras páginas web o cualquier URL. Esta etiqueta funciona de la misma manera que la etiqueta HTML “<a>”.

Sintaxis:

<a href="" 
   target="" 
   type="" 
   rel="" 
   download=""></a>

Atributos:

href: significa referencia de hipertexto y toma el enlace a los otros documentos.
download: Le indica al navegador que descargue un archivo.
hreflang: es el lenguaje humano de la URL o, en palabras simples, el fragmento de URL que apunta al hipervínculo es el hreflang.
rel: Indica la relación entre el destino y los documentos de origen.
target: Indica dónde se va a mostrar la página web.
tipo: Informa sobre el tipo MIME del documento vinculado con la URL.
ping: Es la lista de URLs separadas por espacios.

A continuación se dan algunos ejemplos de la función anterior.

Ejemplo 1:

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            property="viewport"
            content="width=device-width,
                    initial-scale=1.0"/>
        <title>GeeksforGeeks</title>
    </head>
    <body>
        <div style="width:300px; height:300px;">
            <center>
                <h1 style="color:green">
                    GeeksforGeeks
                </h1>
                <h2>
                    <a> Tag SVG
                </h2>
            </center>
            <svg width="500" height="500">
                <a href="http://geeksforgeeks.org">
                    <circle cx="150" cy="100"
                            r="80" fill="green">
                </a>
            </svg>
        </div>
    </body>
</html>

Producción:

Ejemplo 2:

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            property="viewport"
            content="width=device-width,
                    initial-scale=1.0"/>
        <title>GeeksforGeeks</title>
    </head>
    <body>
        <div style="width:300px; height:300px;">
            <center>
                <h1 style="color:green">
                    GeeksforGeeks
                </h1>
                <h2>
                    <a> Tag SVG
                </h2>
            </center>
            <svg width="500" height="500">
                <a href="http://geeksforgeeks.org">
                    <rect x="80" y="30" width="150"
                          height="80" fill="green">
                </a>
            </svg>
        </div>
    </body>
</html>

Producción:

Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:

Chrome 1 y superior
Borde 12 y superior
Firefox 1.5 y superior
Internet Explorer 9 y superior
Safari 3.1 y superior
Ópera 9 y superior

Publicación traducida automáticamente

Artículo escrito por TARuN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

html

Deja una respuesta Cancelar la respuesta