xxxxxxxxxx<html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <h1> An example that uses the SVG DOM function <a href="https://www.w3.org/TR/SVG11/types.html#__svg__SVGLocatable__getBBox">getBBox()</a> </h1> <p> To show what happens when an SVG object (circle in this case) is outside of the SVG "viewport" <br> Note that the key here is putting everything in a <g> element which we can then use the getBBox() on the specific node. </p> <hr> <div id="contains-inside-view-port"> <svg width="100" height="100"> <g id="inside-view-port"> <circle cx="15" cy="15" r="10"></circle> <circle cx="85" cy="85" r="10"></circle> </g> </svg> <p> SVG width: 100 height: 100 </p> </div> <hr> <div id="contains-outside-view-port"> <svg width="100" height="100"> <g id="outside-view-port"> <circle cx="-5" cy="-5" r="25"></circle> <circle cx="105" cy="105" r="25"></circle> </g> </svg> <p> SVG width: 100 height: 100 </p> </div> <hr> <script> // Get Bounding Boxes var insideViewPortBBox = d3.select("#inside-view-port").node().getBBox(); var outsideViewPortBBox = d3.select("#outside-view-port").node().getBBox(); // Print out BBox sizes d3.select("#contains-inside-view-port") .append("p") .html("SVG Bounding Box => SVGRect {" + "x: " + insideViewPortBBox.x + ", y: " + insideViewPortBBox.y + ", width: " + insideViewPortBBox.width + ", height: " + insideViewPortBBox.height + "}"); d3.select("#contains-outside-view-port") .append("p") .html("SVG Bounding Box => SVGRect {" + "x: " + outsideViewPortBBox.x + ", y: " + outsideViewPortBBox.y + ", width: " + outsideViewPortBBox.width + ", height: " + outsideViewPortBBox.height + "}"); </script> </body></html> https://d3js.org/d3.v4.min.js