Elementos SVG anidados

facebook-svg gplus-svg twitter-svg

Que son los elementos SVG anidados?

Dentro de los elementos SVG podemos utilizar otros elementos SVG, por ejemplo así:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="106px" height="122px" 
     viewBox="41 54 106 122">
     <svg><!--un elemento SVG anidado--></svg>
</svg>

Los elementos SVG anidados son muy parecidos a los símbolos ( <symbol> ). A diferencia de ls símbolos, los elementos SVG anidados son visibles. ( Un símbolo aparece en pantalla solo si lo instanciamos con <use> ).

Los elementos SVG anidados no necesitan especificar el espacio de nombre ( xmlns ). Tampoco el elemento SVG padre lo necesita si aparece dentro de un documento HTML.

Normalmente los elementos SVG anidados tienen una posición ( los atributos x e y ) y un tamaño ( los atributos width y height ). También suelen tener un atributo viewBox que define un nuevo sistema de coordenadas local independiente del sistema de coordenadas del elemento SVG padre .


  
  
    
    
  

Por defecto un elemento SVG anidado tiene las mismas dimensiones y el mismo viewBox que el elemento SVG padre. En el siguiente ejemplo el elemento SVG anidado no tiene ningún atributo. El resultado es un elemento SVG que tiene las mismas dimensiones y el mismo viewBox que el elemento SVG padre.

En el siguiente ejemplo la posición y el tamaño del elemento SVG anidado son relativos al viewport del elemento padre ( viewBox='0 0 24 24' ). Por favor observe que el viewBox del elemento SVG anidado define un viewport de 240 x 240 unidades. El valor de las coordinadas de los trazados dentro de este elemento son relativas a este nuevo sistema de coordenadas ( viewBox='0 0 240 240' ).


  
  
    
    
  

Por defecto la posición de un elemento SVG anidado es x="0" y="0". El siguiente ejemplo es parecido al anterior con la única diferencia que el viewport empieza en un punto de coordenadas negativas.

viewBox="-5 -5 24 24"

De esta manera el punto x="0" y="0" no coincide con el origen del viewport y el elemento SVG anidado aparece desplazado hacia la derecha.


  
  
    
    
  

Si el elemento SVG padre tiene un atributo preserveAspectRatio="none" el elemento SVG anidado tendrá la misma deformación que no podrá ser corregida.