Question

这与此错误有关： https://code.google.com/p/svg-edit/wiki/BrowserBugs#getBBox_on_paths_with_curves_includes_control_points

给定一个弧（center，radius，startAngle，endAngle），我能够计算沿路径的点然后是它们的边界框，但是，在safari和chrome中有一个包含边界弧的控制点的bug框。由于渐变填充应用于形状的边界框，因此根据浏览器是否存在此错误，导致覆盖形状的渐变略有不同。

我的问题是：在不使用实际API（getBBox（））的情况下，如何在数学上计算路径中弧的额外控制点，以根据这些参数调整safari / chrome bug（center，radius，startAngle， endAngle）？

这不必使用贝塞尔曲线甚至椭圆，只需一个简单的圆弧。

谢谢！

Answer 1

我为webkit浏览器编写了一个getBBox shim。 Demo here

//webkit(safari, chrome) path element getBBox bug
if(navigator.userAgent.indexOf('AppleWebKit')>0){
    SVGPathElement.prototype.getBBox = function (precision){
        var path = this;
        var total = path.getTotalLength();
        if(total <= 0){
            return {x:0,y:0,width:0,height:0};
        }
        var segLen = precision || 1;
        var len = 0, pt, xarr = [], yarr = [];
        while(len < total){
            pt = path.getPointAtLength(len);
            xarr.push(pt.x);
            yarr.push(pt.y);
            len += segLen;
        }
        pt = path.getPointAtLength(total);
        xarr.push(pt.x);
        yarr.push(pt.y);
        var b = {};
        b.x = Math.min.apply(0,xarr);
        b.y = Math.min.apply(0,yarr);
        b.width = Math.max.apply(0,xarr) - b.x;
        b.height = Math.max.apply(0,yarr) - b.y;
        return b;
    };
}

Answer 2

有关如何为getBBox()实现填充程序的提示，请查看Snap.svg在此处执行的操作：https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js#L414

事实上，对于<path> DOM元素，您可以通过调用来获取正确的BBox：

Snap.path.getBBox(pathElement.getAttribute('d'))

计算safari和chrome中svg路径的getBBox（）中包含的控制点

2 个答案: