⇪

La regla-at @namespace

facebook-svg gplus-svg twitter-svg

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 nombre. Veamos un ejemplo.
Sabemos que en SVG podemos crear enlaces externos, 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 nombres.


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

See the Pen espacios de nombre en SVG #1* by Gabi (@enxaneta) on CodePen.

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}

See the Pen espacios de nombre en SVG #2* by Gabi (@enxaneta) on CodePen.

Este texto acerca de la declaración @namespace hace perte del articulo SVG con estilo