Escala de forma SVG para encajar en los contenidos, donde el contenido incluye foreignObject

¿Hay alguna manera, preferiblemente sin usar JavaScript, de poner algunos contenidos HTML en una forma SVG usando foreignObject, de modo que la forma SVG cambiará el tamaño automáticamente (o escala) para adaptarse a sus contenidos?Escala de forma SVG para encajar en los contenidos, donde el contenido incluye foreignObject

I.e. algo muy vagamente a este ejemplo pseudocódigo, pero válido y funcional en el camino que he descrito:

<?xml version="1.0" standalone="yes"?> 
<svg xmlns = "http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="SCALE_TO_FIT_CONTENTS" height="SCALE_TO_FIT_CONTENTS" fill="gray"> 
    <foreignobject width="100%" height="100%"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <div>Some HTML text</div> 
     </body> 
    </foreignobject> 
    </rect> 
</svg>

Fuente

2012-07-08 sampablokuper

han intentado con un 100% y la altura del 100% de la atención de los padres –

para dar un ejemplo como respuesta? Si funciona como he descrito, con mucho gusto lo marcaré como aceptado. – sampablokuper

@sampablokuper ¿qué has probado? – Duopixel

sin necesidad de utilizar JavaScript, no hay manera posible que usted podría hacer eso. De hecho, las formas SVG no se pueden usar como contenedores. Sin embargo, espero que esto es lo que está pidiendo:

<script type="text/javascript"> 
    function myFun(){ 
     var w = document.getElementById("myDiv").scrollWidth; 
     document.getElementById("myRect").setAttribute("width",w); 
    } 
</script> 
<svg xmlns = "http://www.w3.org/2000/svg" onload="myFun()"> 
    <rect id="myRect" x="10" y="10" width="0" height="100" fill="red"></rect> 

     <foreignObject x="10" y="10" position="absolute" width="100%" height="100%"> 
      <div id="myDiv" style="display: inline-block;">Some HTML text that resizes its SVG container</div> 
     </foreignObject> 
</svg>

Fuente

2012-07-19 14:56:37

Escala de forma SVG para encajar en los contenidos, donde el contenido incluye foreignObject

Respuesta

Cuestiones relacionadas