By scripting you can access the bounding box for a graphical element. This is the bounding box in the coordinate system of the element.
The following demonstrates this for our pumpkin.
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="202px" height="212px" viewBox="-121 -131 242 252" 04: onload="setup()"> 05: 06: <script type="text/ecmascript"> 07: // <![CDATA[ 08: 09: function setup(evt){ 10: var pumpkin = document.getElementById("pumpkin"); 11: var bbox = pumpkin.getBBox(); 12: 13: var box = document.getElementById("pumpkinBox"); 14: box.setAttributeNS(null, "x", bbox.x); 15: box.setAttributeNS(null, "y", bbox.y); 16: box.setAttributeNS(null, "width", bbox.width); 17: box.setAttributeNS(null, "height", bbox.height); 18: } 19: 20: // ]]> 21: </script> 22: 23: <rect id="pumpkinBox" stroke="red" stroke-width="3px" fill="none"/> 24: <g id="pumpkin"> 25: <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/> 26: <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/> 27: <circle cx="-30" cy="-30" r="20" fill="black"/> 28: <circle cx="30" cy="-30" r="20" fill="black"/> 29: <polygon points="0,0 20,25 -20,25" fill="black"/> 30: <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/> 31: </g> 32: 33: </svg> 34:
The following example adds a box around the rectangular links used to change the number of sides of the polygon.
The following example updates the example from the page on Adding and removing tags.
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="500px" height="530px" viewBox="0 0 500 530" 04: font-family="Times, serif" font-size="20px" onload="setup()"> 05: 06: <script> 07: // <![CDATA[ 08: 09: var sides=4; 10: var svgNS = "http://www.w3.org/2000/svg"; 11: 12: function decrease(evt){ 13: if (sides > 3) { 14: sides = sides - 1; 15: updateShape(); 16: } 17: } 18: 19: function increase(evt){ 20: sides = sides + 1; 21: updateShape(); 22: } 23: 24: function updateShape() { 25: var sidesText = document.getElementById("sides"); 26: sidesText.firstChild.nodeValue = "" + sides; 27: 28: var oldpolygon=document.getElementById("Polygon"); 29: var parent = oldpolygon.parentNode; 30: parent.removeChild(oldpolygon); 31: 32: var newpolygon = document.createElementNS(svgNS, "polygon"); 33: 34: var points = ""; 35: var i=0; 36: while (i < sides) { 37: points = points + Math.cos(2*Math.PI*i/sides) + "," + Math.sin(2*Math.PI*i/sides) + " "; 38: i = i + 1; 39: } 40: newpolygon.setAttributeNS(null, "points", points); 41: newpolygon.setAttributeNS(null, "id", "Polygon"); 42: 43: parent.appendChild(newpolygon); 44: } 45: 46: function updateBBox(id) { 47: var text = document.getElementById(id); 48: var bbox = text.getBBox(); 49: 50: var box = document.getElementById(id+"Box"); 51: box.setAttributeNS(null, "x", bbox.x-2); 52: box.setAttributeNS(null, "y", bbox.y-2); 53: box.setAttributeNS(null, "width", bbox.width+4); 54: box.setAttributeNS(null, "height", bbox.height+4); 55: } 56: 57: function setup() { 58: updateBBox("increase"); 59: updateBBox("decrease"); 60: } 61: 62: // ]]> 63: </script> 64: 65: <text x="250" y="20" text-anchor="middle" fill="black" pointer-events="none">This is a regular <tspan id="sides">4</tspan>-gon.</text> 66: <g transform="translate(250,280) scale(248)" stroke="red" fill="yellow" stroke-width="0.008px"> 67: <polygon id="Polygon" points="1,0 0,1 -1,0 0,-1"/> 68: </g> 69: <g onclick="decrease(evt)" cursor="pointer"> 70: <rect id="decreaseBox" fill="lightgreen" stroke="green" stroke-width="1px"/> 71: <text id="decrease" x="10" y="40" text-anchor="start" fill="blue">Fewer sides!</text> 72: </g> 73: <g onclick="increase(evt)" cursor="pointer"> 74: <rect id="increaseBox" fill="lightgreen" stroke="green" stroke-width="1px"/> 75: <text id="increase" x="490" y="40" text-anchor="end" fill="blue">More sides!</text> 76: </g> 77: </svg> 78:
