Elementos SVG anidados
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.