El elemento foreignObject
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.