Tỷ lệ hình SVG phù hợp với nội dung, trong đó nội dung bao gồm nước ngoàiObject

Có cách nào - tốt nhất là không sử dụng JavaScript - để đặt một số nội dung HTML vào hình dạng SVG sử dụng foreignObject, sao cho hình SVG sẽ tự động thay đổi kích thước (hoặc tỷ lệ) để phù hợp với nội dung của nó?Tỷ lệ hình SVG phù hợp với nội dung, trong đó nội dung bao gồm nước ngoàiObject

I.e. cái gì đó rất mơ hồ giống như ví dụ giả này, nhưng có giá trị, và chức năng theo cách tôi đã mô tả:

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

Nguồn

2012-07-08 sampablokuper

bạn đã thử 100% và chiều cao 100% của phụ huynh –

Chăm sóc để đưa ra ví dụ làm câu trả lời? Nếu nó hoạt động như tôi đã mô tả, tôi sẽ sẵn sàng đánh dấu nó là chấp nhận. – sampablokuper

@sampablokuper bạn đã thử những gì? – Duopixel

mà không sử dụng javascript, không có cách nào có thể bạn có thể làm điều đó. Trong thực tế, các hình dạng SVG không thể được sử dụng như các thùng chứa. Nhưng, tôi hy vọng đây là những gì bạn đang yêu cầu:

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

Nguồn

2012-07-19 14:56:37

Tỷ lệ hình SVG phù hợp với nội dung, trong đó nội dung bao gồm nước ngoàiObject

Trả lời

Các vấn đề liên quan