javascript - Svg Path 在 Chrome 和 Firefox 中给出不同的 bbox 值

Question

我正在使用 SVG，今天我遇到了一个奇怪的错误。

我的 SVG 路径(应用了旋转矩阵)在 Chrome 和 Firefox 中显示了不同的 bbox 值。然而，如果路径不旋转，则两个浏览器给出相同的值。

检查下面的图片:-

如您所见，Firefox 生成的结果更加准确。 这是 jsfiddle 链接:- http://jsfiddle.net/Vjs7p/

下面是两条路径:-

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

任何帮助将不胜感激。!

Answer 1

这是一个known bug在 Chrome 中。如果边界框应该是紧的，则 Chrome 中不存在该事件。没有简单的方法，如果您确实也需要在 Chrome 中获得紧密的边界框，则需要循环遍历元素的所有点并手动计算 bbox。如果您考虑所有不同的元素以及计算路径的紧 bbox 的困难，那么这可能会是一项繁重的工作。

这就是我尝试尽可能避免使用边界框的原因。

顺便说一句:您还可以使用 getBoundingClientRect()方法，将坐标中的 bbox 传递到页面原点，如果您使用 svgs screenCTM 的逆转换该 bbox，您将得到一个绝对 svg 坐标中的边界框。这可能会有所帮助，因为 getBBox()返回用户空间中的值，因此相对于元素进行变换。

根据评论中的要求，这可能是计算 <svg> 绝对坐标中的边界框的一种方法。 。它返回一个数组，包括左上角和右下角。

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)];
}