javascripthtmlsvgjquery-svglibrsvg

Getting the dimensions of an svg path without using bounding box


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?


Solution

  • 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;