Espacios de nombre en SVG

facebook-svg gplus-svg twitter-svg

En documentos XML ( como ya sabemos, SVG se basa en XML ) los elementos y sus atributos pertenecen a espacios de nombres ( namespaces ), con el objetivo de prevenir conflictos. El espacio de nombres puede ser definido utilizando el atributo xmlns.

En el siguiente ejemplo el atributo xmlns define el espacio de nombres.

xmlns = "http://www.w3.org/2000/svg"

Ulteriormente utilizamos el espacio de nombres para definir el prefijo de espacios de nombre ( namespace prefix ):

xmlns:xlink = "http://www.w3.org/1999/xlink"

Ahora podemos utilizar el prefijo xlink para evitar conflictos de nombre ya que el atributo href y el elemento a pueden ser encontrados también en el HTML.

<a xlink:href ="http://w3.unpocodetodo.info/svg/introduccion.php">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink" 
                   width="106px" height="122px" 
                   viewBox="41 54 106 122">
              
  <a xlink:href="http://w3.unpocodetodo.info/svg/introduccion.php ">
     <text x="125" y="30" text-anchor="middle">
         SVG - una introducción
     </text>
  </a>
</svg>

Espacios de nombres y javascript

El método createElementNS

En HTML podemos crear nuevos elementos de manera dinámica utilizando javascript. Y todo el mundo sabe como hacerlo:

var nuevaImagen = document.createElement('img');

En SVG esto es un poco diferente ya que tenemos que utilizar espacios de nombres. Para cear un nuevo elemento SVG utilizamos el método createElementNS.

  // el enlace utilizado para el espacio de nombre
  var SVG_NS = 'http://www.w3.org/2000/svg';
  // crear un nuevo elemento image
  var imagen = document.createElementNS(SVG_NS, 'image');
El método setAttributeNS

Los elementos necesitan atributos y en HTML podemos fácilmente establecer los nuevos atributos de los elementos utilizando javascript:

nuevaImagen.setAttribute("class", "conClase");
nuevaImagen.setAttribute("src", "unaFlor.png");

Y de nuevo: en SVG esto es un poco diferente: hay que utilizar espacios de nombres aunque no es siempre necesario especificarlos. El método a utilizar en esta caso es setAttributeNS.

// el enlace utilizado para xlink - un prefijo de espacio de nombre
var XLink_NS = 'http://www.w3.org/1999/xlink';
image.setAttributeNS(null, 'class', 'conClase');
image.setAttributeNS(XLink_NS, 'xlink:href', unaFlor.png');

Vean un ejemplo que utiliza SVG, javaScript y los métodos createElementNS y setAttributeNS, para crear esta imágen:
Yin y Yang con path

El método getAttributeNS

Para recuperar el valor de un atributo de un elemento SVG generalmente utilizamos el método getAttribute. Sin embargo hay ocasiones cuando necesitamos utilizar el el método getAttributeNS, como por ejemplo cuando queremos recuperar el valor del attributo xlink:href de un elemento

imagen.getAttributeNS('http://www.w3.org/1999/xlink', 'href')

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.

Inkscape

Inkscape tiene su propio espacio de nombres. A veces podemos encontrar dentro de un elemento SVG un markup como este:

<g inkscape:groupmode="layer"
   id="layer11"
   inkscape:label="loquefuera">
   <rect width="100" height="50"/>
</g>

Si queremos dar estilo al elemento <rect> situado dentro del grupo lo podemos hacer utilizando CSS de la siguiente manera:


/*declare el prefijo para el espacio de nombres*/
@namespace ink "http://www.inkscape.org/namespaces/inkscape";

/*escapar los dos puntos (:) o utilice la barra vertical |*/
[inkscape\:label="loquefuera"], [ink|label="loquefuera"] {
    fill:red;
}

  
    
  
    

Para hacer lo mismo pero utilizando javascript, es así como lo podemos hacer:

See the Pen inkscape NS*** by Gabi (@enxaneta) on CodePen.