Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

La regla-at @namespace CSS

La regla-at @namespace se utiliza para declarar un prefijo de espacio de nombre en CSS para poder crear selectores asociados solo con este espacio de nombre.

Selectores CSS y espacios de nombre

Por defecto los selectores CSS son aplicables a todos los elementos del documento, fuera lo que fuera su espacio de nombrestar. Veamos un ejemplo.
Sabemos que en SVG podemos crear enlaces externosstar, y para esto, exactamente como en el HTML utilizamos el elemento <a>, aunque, en el SVG, la sintaxis es diferente:
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="enlace.php">
    <text x="125" y="30" text-anchor="middle">algo de texto</text>
</a>
En el CSS el selector a selecciona tanto a los enlaces creados en el SVG como a los creados en el HTML. Para seleccionar solo a los elementos <a> creados en el SVG necesitamos utilizar espacios de nombresstar.
<p><a href="http://w3.unpocodetodo.info/canvas/introduccion.php">Canvas - una introducción</a></p>
  <svg width="250" height="50" viewBox="0 0 250 50">
  <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://w3.unpocodetodo.info/svg/introduccion.php">
        <text x="125" y="30" text-anchor="middle">SVG - una introducción</text>
   </a>
</svg>
En este ejemplo quermos dar estilo solo al segundo elemento <a>, el que aparece en el SVG. Para esto primero tenemos que definir, en el CSS, el espacio de nombres. y lo hacemos utilizando la regla-at @namespace seguida por el nombre que le queramos dar: "svg" en este caso.

@namespace svg "http://www.w3.org/2000/svg";
Para seleccionar solo los elementos <a> que pertenecen al espacio de nombres "svg" utilizamos esta sintaxis:
svg|a{font-family: Consolas}
Alternativamente, podemos seleccionar solo a los elementos que tienen un atributo xlink:href. Para esto primero tenemos que definir el prefijo de espacios de nombres que en este caso llamamos xlink ( pero podemos llamarlo como queramos ):
@namespace xlink "http://www.w3.org/1999/xlink";
Ulteriormente para seleccionar solo a los elementos <a> que tienen un atributo xlink:href utilizamos esta sintaxis:
a[xlink|href]{font-family: Consolas}
Este texto acerca de la declaración @namespace hace perte del articulo SVG con estilostar

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas