SVG bounding boxes incorrectly rendered

JavaScript
,
1

Below is the HTML and SVG drawing, I am working with. getBoundingClientRect is perhaps returning wrong bounding boxes and I am unable to figure out why. Also , I how do I get the coordinates of the lines and extend them across the screen. All the lines extended across or along will form a grid.Can we get the intersection of these grids and draw some small circles?

<!DOCTYPE html>
<html>
<body onload="selectSVG()" >


<script type = "text/JavaScript">
 
     function addSvgElement(box,i)
        {
            var rect =  document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rect.setAttribute('x', box.x);
            rect.setAttribute('y', box.y);
            rect.setAttribute('width', box.width);
            rect.setAttribute('height', box.height);
            rect.setAttribute('style', "stroke:blue; fill:none;stroke-width:1");
            rect.id = "rect"+i;
            var svg = document.getElementById('mysvg');
            svg.appendChild(rect);
        }
        
        
        function addSvgElement_CTM(element,box,i)
        {
         var svg = document.getElementById('mysvg');
          var pt = svg.createSVGPoint();
          pt.x = box.x;
          pt.y = box.y;
          console.log("x-->",box.x,pt.x)
          console.log("y-->",box.y,pt.y)
          console.log("wxh-->",box.width,box.height)
          
          var ptnew=pt.matrixTransform(element.getScreenCTM().inverse())
          console.log("ptnew-->",ptnew.x,ptnew.y)
          
  
            var rect =  document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rect.setAttribute('x', ptnew.x);
            rect.setAttribute('y', ptnew.y);
            rect.setAttribute('width', box.width);
            rect.setAttribute('height', box.height);
            rect.setAttribute('style', "stroke:green; fill:none;stroke-width:1");
            rect.id = "rect"+i;
            
            svg.appendChild(rect);
        }

  function getCoordinates()
  {
		var elem = document.getElementByTag('text');
        rect=elem.getBoundingClientRect();
        addSvgElement(rect,1); 
        // addSvgElement_CTM(elem,rect,11);
        
  }
   function selectSVG() 
         {
            
            texts=document.documentElement.getElementsByTagName("text");
                 
              
			var svg = document.getElementById("mysvg");
			var box = svg.viewBox.baseVal;			
			addSvgElement(box,100000);
			console.log(box)
		
	
				var countLatLonTexts=0
	          for (i = 0; i < texts.length; i++) 
              { 
                    if( texts[i].getNumberOfChars()==5)
                    {
                     var x =  texts[i].textContent;
                     var patt =/-/;
                     console.log(patt.test(x))
                     if (patt.test(x)==true)
                      {                     
                       // alert(x)
                        var rect = texts[i].getBoundingClientRect();
                       addSvgElement(rect,i);      
                       
                       addSvgElement_CTM(texts[i],rect,i)
						
						texts[i].setAttribute('style', "fill:blue; font-size=12; font-family=TTE1EC34C8t00 ");
						
                        
                      }//if
                   }//if
               }//for
             
           }

  </script>


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="612pt" height="792pt" viewBox="0 0 612 792">
 
 
<clipPath id="cp0">
<path transform="matrix(.93939,0,0,-.93939,54,762)" d="M 0 0 L 522.23 0 L 522.23 792 L 0 792 Z "/>
</clipPath>
<g clip-path="url(#cp0)">

  <text id="cp7931" xml:space="preserve" transform="matrix(0 .9393907 -.9393907 0 54 762)" fill="green" font-size="6" font-family="TTE1EC34C8t00"><tspan y="-161.279" x="-783.12 -780.72189 -778.3237 -776.6433 -774.2452">41-58</tspan></text>
<text id="cp7931" xml:space="preserve" transform="matrix(0 .9393907 -.9393907 0 54 762)" font-size="6" font-family="TTE1EC34C8t00"><tspan y="-161.279" x="-783.12 -780.72189 -778.3237 -776.6433 -774.2452">41-58</tspan></text>
<path transform="matrix(.2254536,0,0,-.2254536,54,762)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 678.996 1208 L 678.996 1234 "/>
<text xml:space="preserve" transform="matrix(0 .9393907 -.9393907 0 54 762)" font-size="6" font-family="TTE1EC34C8t00"><tspan y="-161.279" x="-309.36 -306.96186 -304.56373 -302.88328 -300.48515">41-58</tspan></text>
<path transform="matrix(.2254536,0,0,-.2254536,54,762)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 678.996 3297 L 678.996 3271 "/>

<path transform="matrix(.2254536,0,0,-.2254536,54,762)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 468.996 1469 L 493.996 1469 "/>
<text xml:space="preserve" transform="matrix(0 .9393907 -.9393907 0 54 762)" font-size="6" font-family="TTE1EC34C8t00"><tspan y="-120.719" x="-357.36 -354.96186 -352.56373 -350.88328 -348.48515">87-52</tspan></text>
<path transform="matrix(.2254536,0,0,-.2254536,54,762)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 1979 1469 L 1953 1469 "/>
<text xml:space="preserve" transform="matrix(0 .9393907 -.9393907 0 54 762)" font-size="6" font-family="TTE1EC34C8t00"><tspan y="-463.439" x="-357.36 -354.96186 -352.56373 -350.88328 -348.48515">87-52</tspan></text>
<path transform="matrix(.2254536,0,0,-.2254536,54,762)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 468.996 1861 L 493.996 1861 "/>
<text xml:space="preserve" transform="matrix(0 .9393907 -.9393907 0 54 762)" font-size="6" font-family="TTE1EC34C8t00"><tspan y="-120.719" x="-451.92 -449.52189 -447.12376 -445.4433 -443.04518">87-53</tspan></text>
<path transform="matrix(.2254536,0,0,-.2254536,54,762)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 1979 1861 L 1953 1861 "/>
<text xml:space="preserve" transform="matrix(0 .9393907 -.9393907 0 54 762)" font-size="6" font-family="TTE1EC34C8t00"><tspan y="-463.439" x="-451.92 -449.52189 -447.12376 -445.4433 -443.04518">87-53</tspan></text>
</g>
</svg>

</body>
</html>
2

well getElementByTag isnt a defined Javascript command, so i’m guessing your bounding box on that one is gonna be an issue…

I must also caution you that getBoundingClientRect is a working draft function, and does not currently have support in IE, Edge, or Safari for the x/y values.It may be more client-safe to use the top/left values to assign a position.

top and left are defined in terms of the current window viewport, and will have to be adjusted by identifying the current distance to the corner of the SVG canvas for use as an offset.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.