Tự động hóa SVG?

Question

Đây là một code demo

Tôi có một SVG có chiều cao không xác định. Tôi có thể tìm ra nó sau khi tôi tải trong json và sử dụng javascript + toán học nhưng có bất kỳ css tôi có thể sử dụng để tự động kích thước nó?

css:

svg { 
    width: 500px; 
    height: 9000px; 
} 
.tabme { 
    border:3px solid red; 
    height: 200px; 
    overflow:scroll; 
} 

html:

<div class="tabme"> 
    <div id="Chart"> 
    <div class="chartbody" /> 
    <svg> 
     <rect width="190" y="0" height="16" x="175" /> 
     <rect width="190" y="20" height="16" x="175" /> 
     <rect width="190" y="40" height="16" x="175" /> 
     <rect width="190" y="60" height="16" x="175" /> 
     <rect width="190" y="80" height="16" x="175" /> 
     <rect width="190" y="100" height="16" x="175" /> 
     <rect width="190" y="120" height="16" x="175" /> 
     <rect width="190" y="140" height="16" x="175" /> 
     <rect width="190" y="160" height="16" x="175" /> 
     <rect width="190" y="180" height="16" x="175" /> 
     <rect width="190" y="200" height="16" x="175" /> 
     <rect width="190" y="220" height="16" x="175" /> 
     <rect width="190" y="240" height="16" x="175" /> 
     <rect width="190" y="260" height="16" x="175" /> 
     <rect width="190" y="280" height="16" x="175" /> 
     <rect width="190" y="300" height="16" x="175" /> 
    </svg> 
    </div> 
</div> 

Answer 1

Nếu phần tử SVG không có bất kỳ width và height thuộc tính, sau đó chiều rộng/chiều cao nên calculated according to the CSS specs, như đã chỉ ra bởi Robert longson . Tuy nhiên, những giá trị đó sẽ không phản ánh đúng kích thước của nội dung SVG. Bạn có thể tìm hiểu chiều rộng thích hợp/chiều cao sử dụng getBBox():

// Javascript to run after document load 
 
var svg = document.getElementsByTagName("svg")[0]; 
 
var bbox = svg.getBBox(); 
 
svg.setAttribute("width", bbox.x + bbox.width + "px"); 
 
svg.setAttribute("height",bbox.y + bbox.height + "px");

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect x="30" y="40" width="50" height="60"/> 
 
</svg>

Answer 2

Một cách khác là làm tương tự như JS trên nhưng thiết viewBox thay vì width và height (lưu ý, không viewbox!) từ JS với các giá trị từ cuộc gọi getBBox(). Sau đó sử dụng preserveAspectRatio="xMidYMid meet" hoặc tương tự.

https://jsfiddle.net/t88pLgbb/4/