El elemento foreignObject

facebook-svg gplus-svg twitter-svg

El elemento <foreignObject> ( objeto externo ) se utiliza en SVG para insertar objetos que pertenecen a otros espacios de nombre como por ejemplo (X)HTML.

En SVG el texto no se ajusta automaticamente al espacio disponible como en HTML. Si en SVG tenemos un texto muy largo y queremos que se ajuste a la anchura de la caja padre como en el HTML - este es uno de los casos habituales en los que podemos utilizar el elemento <foreignObject>

<foreignObject x="20" y="20" width="160" height="160" >
   <p xmlns="http://www.w3.org/1999/xhtml" style="font: 16px serif;">Lorem ipsum...</p>
</foreignObject>

Como que se trata de un espacio de nombre diferente el párafo tiene que tener un atributo xmlns que defina el espacio de nombre utilizado.

<p xmlns="http://www.w3.org/1999/xhtml" ...

Si utilizamos el SVG dentro de un documento HTML podemos omitir lo del espacio de nombre, pero es obligatorio en documentos .svg.

Algunos atributos especificos

Un elemento <foreignObject> tiene que tener una anchura width y una altura height. Sin estos atributos el elemento aparece colapsado y el contenido de este es invisible almenos que

<foreignObject style="overflow:visible"...

Observación: utilizar overflow:visible disminuie el rendimiento así que es mejor no utilizarlo.

Un elemento <foreignObject> puede tener también una posición. Los atributos x e y establecen las coordenadas de la esquina izquierda arriba del elemento <foreignObject>. El valor por defecto de estos atributos es x="0" e y="0"

See the Pen SVG foreignObject by Gabi (@enxaneta) on CodePen.