1

Would there be a way to get the dimensions of an svg path and display it in a div? The bounding box is not an option as it is buggy in Webkit when it comes to bezier curves. I am doing a modification of svg-edit btw: https://code.google.com/p/svg-edit/

This is what im currently using. 

    <script>
    var myVar=setInterval(function(){getDimensions()},10);

    function getDimensions() 

    {

  svgNode = svgCanvas.getSelectedElems()[0];


var getw = svgNode.getBoundingClientRect().width;
var geth = svgNode.getBoundingClientRect().height;
getw= parseInt(getw);
geth= parseInt(geth);
 document.getElementById('heightbox').innerHTML = geth;
 document.getElementById('widthbox').innerHTML = getw;



}

    </script>

Unfortunately thre bounding box is unreliable. Any ideas other than the bbox?

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167

1 Answers1

6

RaphaelJS has a utility method for determining the bounding box of a path - http://raphaeljs.com/reference.html#Raphael.pathBBox

var dims = Raphael.pathBBox(pathString);
var getw = dims.width;
var geth = dims.height;
Kris
  • 286
  • 1
  • 6
  • Its different than the one im using right? Any ideas on how the code would be modified using your solution? – nicholaswmin Feb 19 '13 at 04:14
  • It doesn't use the SVG bounding box API, rather it uses an algebraic calculation of the bounding dimensions for the specified path. It is a static method that takes an SVG-style path string. You should be fine to include this library in your project and use the method directly. – Kris Feb 19 '13 at 04:20
  • Try var dims = Raphael.pathBBox(svgNode.getAttribute('d')); Working example here http://jsfiddle.net/ReEmu/2/ The string representing the path is stored on the 'd' attribute. – Kris Feb 19 '13 at 04:40
  • does raphael.js an open source? – aiipee Apr 11 '14 at 01:34