Skalieren Sie die SVG-Form so, dass sie zum Inhalt passt, wobei der Inhalt foreignObject enthält

Gibt es eine Möglichkeit - vorzugsweise ohne Verwendung von JavaScript - einige HTML-Inhalte in eine SVG-Form unter Verwendung von foreignObject zu setzen, so dass die SVG-Form automatisch skaliert wird um seinen Inhalt anzupassen?Skalieren Sie die SVG-Form so, dass sie zum Inhalt passt, wobei der Inhalt foreignObject enthält

I.e. etwas sehr vage wie dieses Pseudo-Code Beispiel, aber gültig und funktionell in der Art, wie ich beschrieben habe:

<?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>

Quelle

2012-07-08 sampablokuper

haben Sie versucht, mit 100% und eine Höhe von 100% der Mutter –

Pflege einem Beispiel als eine Antwort zu geben? Wenn es so funktioniert, wie ich es beschrieben habe, werde ich es gerne als akzeptiert markieren. – sampablokuper

@sampablokuper was hast du probiert? – Duopixel

ohne Javascript zu verwenden, gibt es keine Möglichkeit, die Sie tun können. Tatsächlich können die SVG-Formen nicht als Container verwendet werden. Aber ich hoffe, das ist, was Sie fragen nach:

<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>

Quelle

2012-07-19 14:56:37

Skalieren Sie die SVG-Form so, dass sie zum Inhalt passt, wobei der Inhalt foreignObject enthält

Antwort

Verwandte Themen