Svg Path gives different bbox values in Chrome and Firefox

Question

I am working with SVG, and today I got a strange bug.

My SVG path (on which rotation matrix is applied) shows different values of bbox in Chrome and Firefox. whereas, if path is not rotated, than both browser gives same value.

check the below image:-

As you can see, Firefox generate more accurate result. here is jsfiddle link:-http://jsfiddle.net/Vjs7p/

below are the two paths:-

  <g id="path_simple">
       <path fill="none" stroke="#9400D3" stroke-width="1" stroke-dasharray="1, 0.1" d="M 0 0 L 0.51 0.86 1.01 1.73 1.52 2.59 2.02 3.45 2.53 4.32 3.03 5.18 3.54 6.04 4.04 6.9 4.55 7.77 5.05 8.63 5.56 9.49 6.06 10.36 6.57 11.22 7.07 12.08 7.58 12.95 8.08 13.81 8.59 14.67 9.09 15.53 9.6 16.4 10.1 17.26 10.61 18.12 11.12 18.99 11.62 19.85 12.13 20.71 12.36 21.42 11.36 21.42 10.36 21.42 9.36 21.42 8.36 21.42 7.36 21.42 6.36 21.42 5.36 21.42 4.36 21.42 3.36 21.42 2.36 21.42 1.36 21.42 0.36 21.42 -0.64 21.42 -1.64 21.42 -2.64 21.42 -3.64 21.42 -4.64 21.42 -5.64 21.42 -6.64 21.42 -7.64 21.42 -8.64 21.42 -9.64 21.42 -10.64 21.42 -11.64 21.42 -12.49 21.33 -11.98 20.47 -11.48 19.61 -10.97 18.75 -10.47 17.88 -9.96 17.02 -9.46 16.16 -8.95 15.29 -8.45 14.43 -7.94 13.57 -7.44 12.7 -6.93 11.84 -6.43 10.98 -5.92 10.12 -5.42 9.25 -4.91 8.39 -4.41 7.53 -3.9 6.66 -3.4 5.8 -2.89 4.94 -2.38 4.08 -1.88 3.21 -1.38 2.35 -0.87 1.49 -0.36 0.62 0 0" transform="matrix(1 0 0 1 500 300)"/>
       </g>
       <g id="path_rotated">
       <path fill="none" stroke="#9400D3" stroke-width="1" stroke-dasharray="1, 0.1" d="M 0 0 L 0.51 0.86 1.01 1.73 1.52 2.59 2.02 3.45 2.53 4.32 3.03 5.18 3.54 6.04 4.04 6.9 4.55 7.77 5.05 8.63 5.56 9.49 6.06 10.36 6.57 11.22 7.07 12.08 7.58 12.95 8.08 13.81 8.59 14.67 9.09 15.53 9.6 16.4 10.1 17.26 10.61 18.12 11.12 18.99 11.62 19.85 12.13 20.71 12.36 21.42 11.36 21.42 10.36 21.42 9.36 21.42 8.36 21.42 7.36 21.42 6.36 21.42 5.36 21.42 4.36 21.42 3.36 21.42 2.36 21.42 1.36 21.42 0.36 21.42 -0.64 21.42 -1.64 21.42 -2.64 21.42 -3.64 21.42 -4.64 21.42 -5.64 21.42 -6.64 21.42 -7.64 21.42 -8.64 21.42 -9.64 21.42 -10.64 21.42 -11.64 21.42 -12.49 21.33 -11.98 20.47 -11.48 19.61 -10.97 18.75 -10.47 17.88 -9.96 17.02 -9.46 16.16 -8.95 15.29 -8.45 14.43 -7.94 13.57 -7.44 12.7 -6.93 11.84 -6.43 10.98 -5.92 10.12 -5.42 9.25 -4.91 8.39 -4.41 7.53 -3.9 6.66 -3.4 5.8 -2.89 4.94 -2.38 4.08 -1.88 3.21 -1.38 2.35 -0.87 1.49 -0.36 0.62 0 0" transform="matrix(0.699 -0.715 0.715 0.699 648.544 300.621)"/>
       </g>

any help would be highly appreciated.!

Answer 1

That is a known bug in Chrome. Event if the bounding box should be tight, it is not in Chrome. There is no easy way around and if you really need to get a tight bounding box in chrome too, you need to cycle through all the points of the element and compute the bbox manually. If you take all the different elements into account and the difficulties to compute the tight bbox of a path, than this might get a heavy job.

That is a reason why I try to avoid using bounding boxes as much a possible.

Btw.: You can also use the getBoundingClientRect() method, what delivers the bbox in coordinates to the page origin, if you transform that bbox with the inverse of the svgs screenCTM, you have got a bounding box in absolute svg coordinates. That might be helpful, since getBBox() returns values in user space, so relative to the elements transform.

As requested in the comment, this might be a way to compute the bounding box in coordinates absolute to the <svg>. It return an array, including the upper left and lower right edge.

function bbox (svg, element) {
    var mtr = svg.getScreenCTM().inverse(),
        bounds = element.getBoundingClientRect(),
        p1 = svg.createSVGPoint(),
        p2 = svg.createSVGPoint();

    p1.x = bounds.left;
    p1.y = bounds.top;

    p2.x = bounds.right;
    p2.y = bounds.bottom;

    return [p1.matrixTransform(mtr), p2.matrixTransform(mtr)];
}