Geek Answers Handbook

Automate SVG?

Here is the demon

I have an SVG with an unknown height. I can figure this out after loading json and using javascript + math, but is there any css I can use to dynamically size it?

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>
+7
css svg
source share
3 answers

If the SVG element does not have width and height attributes, then the width / height should be calculated according to CSS specifications , as Robert Longson pointed out. However, these values ​​will not reflect the correct dimensions of the SVG content. You can find out the correct sizes and layout using getBBox() :

 // Javascript to run after document load var svg = document.getElementsByTagName("svg")[0]; var bbox = svg.getBBox(); svg.setAttribute("width", bbox.width + "px"); svg.setAttribute("height", bbox.height + "px"); svg.setAttribute("viewBox", '${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}'); 
 <svg xmlns="http://www.w3.org/2000/svg" style="background-color: red"> <rect x="30" y="40" width="50" height="60"/> </svg>

+15
source share

An alternative is to perform a similar JS above, but setting the viewBox (note, not the viewbox !) Instead of the width and height from JS with the values ​​from the getBBox() call. Then use preserveAspectRatio="xMidYMid meet" or similar.

 var svg = document.getElementById("x1"); svg.setAttribute("viewBox", "0 0 32 18.4");

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

+3
source share

Inspired by Thomas's answer, here's how I did it:

 if (true) { let svg = document.getElementById("bleh"); let bb = svg.getBBox(); svg.setAttribute("width", bb.width); svg.setAttribute("height", bb.height); svg.setAttribute("transform", "translate(-" + bb.width / 2 + ",-" + bb.height / 2 + ") \ scale(" + 600 / bb.width + "," + 250 / bb.height + ") \ translate(" + bb.width / 2 + "," + bb.height / 2 + ")"); } 
 <!DOCTYPE html> <html> <head> </head> <body> <div style="width: 600px; height: 250px; border: 1px solid blue;"> <svg id="bleh"> <path d="M0 0 T100 400 T500 500 T800 200 T0 0" fill="purple" opacity="0.8" /> <path d="M0 0 L100 400 L500 500 L800 200 L0 0" fill="none" stroke="black" stroke-width="2" /> </svg> </div> </body> </html>

Purpose: try to automatically fit the entire SVG-graph in the size of div 600 * 250.

Essentially, I got the width and height of the SVG after it was formed, translated it 50% left and up, scaled according to the ratio of the width and the difference between 600 * 250 division and the size of the SVG graph, and then translate it back to 50% to the right and down. That way, he stayed in the center while I scaled it. (It seems that such percentages do not like real interest ...)

0
source share

More articles:


All Articles