Cómo incrustar un div HTML dentro de un SVG

Ejemplo:Cómo incrustar un div HTML dentro de un SVG

<div> Hello World </div> 

<svg> 
<div> From SVG Land</div> 
</svg>

Pregunta:

A pesar de las etiquetas, se analizan los objetos SVG separado y no una parte apropiada del árbol DOM? ¿Cómo obtengo los DIV dentro de los elementos de SVG?

Fuente

2012-07-08 Anonymous

Eche un vistazo a la instalación de objetos extraños de svg. http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

Fuente

2012-07-08 10:27:18 Stasik

Un resumen del enlace estaría bien. Fue escrito 4 años antes de que escribiera esta respuesta, y ahora es 3 años más después de eso. El hecho de que todavía esté activo es un milagro, pero probablemente no deberíamos presionar nuestra suerte. – trysis

¡Es 2016 y el enlace está todavía allí! :) – cesarpachon

Según lo mencionado por @Stasik, se puede usar foreignObject.

Ejemplo:

<svg> 
    <foreignObject width="100" height="50" 
       requiredExtensions="http://www.w3.org/1999/xhtml"> 
     <!-- XHTML content goes here --> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <p>Here is a paragraph that requires word wrap</p> 
     </body> 
    </foreignObject> 
<svg>

Extraído de:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

Fuente

2017-11-15 05:41:30

Cómo incrustar un div HTML dentro de un SVG

Respuesta

Cuestiones relacionadas