Skalowanie kształtu SVG w celu dopasowania do zawartości, gdzie zawartość obejmuje obiekt obcyOne

Czy istnieje sposób - najlepiej bez użycia JavaScriptu - do umieszczenia treści HTML w kształcie SVG przy użyciu foreignObject, tak aby kształt SVG automatycznie zmieniał rozmiar (lub skalę) dopasować jego zawartość?Skalowanie kształtu SVG w celu dopasowania do zawartości, gdzie zawartość obejmuje obiekt obcyOne

tj. coś bardzo niejasno jak w poniższym przykładzie pseudokod, ale ważny i funkcjonalny w drodze Opisałem:

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

Źródło

2012-07-08 sampablokuper

próbowałeś ze 100% do wysokości 100% nad rodzicami –

dać przykład jako odpowiedź? Jeśli działa tak, jak to opisałem, z radością oznaczy to jako zaakceptowane. – sampablokuper

@samampablokuper co próbujesz? – Duopixel

bez używania javascript, nie ma sposobu, można to zrobić. W rzeczywistości kształty SVG nie mogą być używane jako pojemniki. Ale mam nadzieję, że to co prosisz:

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

Źródło

2012-07-19 14:56:37

Skalowanie kształtu SVG w celu dopasowania do zawartości, gdzie zawartość obejmuje obiekt obcyOne

Odpowiedz

Powiązane problemy