我制作了一个通用的 SVG flattener flatten.js，支持所有形状和路径命令：https ://gist.github.com/timo22345/9413158

基本用法：flatten(document.getElementById('svg'));

它的作用：展平元素（将元素转换为路径并展平变换）。如果参数元素（其 id 在 'svg' 之上）有子元素，或者它的后代有子元素，这些子元素也会被扁平化。

可以展平的内容：整个 SVG 文档、单个形状（路径、圆形、椭圆等）和组。嵌套组会自动处理。

属性呢？复制所有属性。仅删除在路径元素中无效的参数（例如 r、rx、ry、cx、cy），但不再需要它们。还删除了转换属性，因为转换被扁平化为路径命令。

如果您想使用非仿射方法（例如透视扭曲）修改路径坐标，您可以使用以下方法将所有线段转换为三次曲线： flatten(document.getElementById('svg'), true);

还有参数“toAbsolute”（将坐标转换为绝对坐标）和“dec”，小数点分隔符后的位数。

极限路径和形状测试器：https : //jsfiddle.net/fjm9423q/embedded/result/

基本使用示例：http : //jsfiddle.net/nrjvmqur/embedded/result/

缺点：文本元素不起作用。这可能是我的下一个目标。

如果每个对象（圆圈等）都首先转换为路径，那么考虑转换就很容易了。我制作了一个测试平台 ( http://jsbin.com/oqojan/73 )，您可以在其中测试功能。测试平台创建随机路径命令并将随机变换应用于路径，然后展平变换。当然，实际上路径命令和变换不是随机的，但是为了测试准确性，它很好。

有一个函数 flatten_transformations()，它的主要任务是：

function flatten_transformations(path_elem, normalize_path, to_relative, dec) {

    // Rounding coordinates to dec decimals
    if (dec || dec === 0) {
        if (dec > 15) dec = 15;
        else if (dec < 0) dec = 0;
    }
    else dec = false;

    function r(num) {
        if (dec !== false) return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
        else return num;
    }

    // For arc parameter rounding
    var arc_dec = (dec !== false) ? 6 : false;
    arc_dec = (dec && dec > 6) ? dec : arc_dec;

    function ra(num) {
        if (arc_dec !== false) return Math.round(num * Math.pow(10, arc_dec)) / Math.pow(10, arc_dec);
        else return num;
    }

    var arr;
    //var pathDOM = path_elem.node;
    var pathDOM = path_elem;
    var d = pathDOM.getAttribute("d").trim();

    // If you want to retain current path commans, set normalize_path to false
    if (!normalize_path) { // Set to false to prevent possible re-normalization. 
        arr = Raphael.parsePathString(d); // str to array
        arr = Raphael._pathToAbsolute(arr); // mahvstcsqz -> uppercase
    }
    // If you want to modify path data using nonAffine methods,
    // set normalize_path to true
    else arr = Raphael.path2curve(d); // mahvstcsqz -> MC
    var svgDOM = pathDOM.ownerSVGElement;

    // Get the relation matrix that converts path coordinates
    // to SVGroot's coordinate space
    var matrix = pathDOM.getTransformToElement(svgDOM);

    // The following code can bake transformations
    // both normalized and non-normalized data
    // Coordinates have to be Absolute in the following
    var i = 0,
        j, m = arr.length,
        letter = "",
        x = 0,
        y = 0,
        point, newcoords = [],
        pt = svgDOM.createSVGPoint(),
        subpath_start = {};
    subpath_start.x = "";
    subpath_start.y = "";
    for (; i < m; i++) {
        letter = arr[i][0].toUpperCase();
        newcoords[i] = [];
        newcoords[i][0] = arr[i][0];

        if (letter == "A") {
            x = arr[i][6];
            y = arr[i][7];

            pt.x = arr[i][6];
            pt.y = arr[i][7];
            newcoords[i] = arc_transform(arr[i][4], arr[i][5], arr[i][6], arr[i][4], arr[i][5], pt, matrix);
            // rounding arc parameters
            // x,y are rounded normally
            // other parameters at least to 5 decimals
            // because they affect more than x,y rounding
            newcoords[i][7] = ra(newcoords[i][8]); //rx
            newcoords[i][9] = ra(newcoords[i][10]); //ry
            newcoords[i][11] = ra(newcoords[i][12]); //x-axis-rotation
            newcoords[i][6] = r(newcoords[i][6]); //x
            newcoords[i][7] = r(newcoords[i][7]); //y
        }
        else if (letter != "Z") {
            // parse other segs than Z and A
            for (j = 1; j < arr[i].length; j = j + 2) {
                if (letter == "V") y = arr[i][j];
                else if (letter == "H") x = arr[i][j];
                else {
                    x = arr[i][j];
                    y = arr[i][j + 1];
                }
                pt.x = x;
                pt.y = y;
                point = pt.matrixTransform(matrix);
                newcoords[i][j] = r(point.x);
                newcoords[i][j + 1] = r(point.y);
            }
        }
        if ((letter != "Z" && subpath_start.x == "") || letter == "M") {
            subpath_start.x = x;
            subpath_start.y = y;
        }
        if (letter == "Z") {
            x = subpath_start.x;
            y = subpath_start.y;
        }
        if (letter == "V" || letter == "H") newcoords[i][0] = "L";
    }
    if (to_relative) newcoords = Raphael.pathToRelative(newcoords);
    newcoords = newcoords.flatten().join(" ").replace(/\s*([A-Z])\s*/gi, "$1").replace(/\s*([-])/gi, "$1");
    return newcoords;
} // function flatten_transformations​​​​​

// Helper tool to piece together Raphael's paths into strings again
Array.prototype.flatten || (Array.prototype.flatten = function() {
  return this.reduce(function(a, b) {
      return a.concat('function' === typeof b.flatten ? b.flatten() : b);
    }, []);
});

代码使用 Raphael.pathToRelative()、Raphael._pathToAbsolute() 和 Raphael.path2curve()。Raphael.path2curve() 是错误修正版本。

如果使用参数 normalize_path=true 调用 flatten_transformations()，则所有命令都转换为 Cubics，一切正常。并且可以通过删除if (letter == "A") { ... }和删除 H、V 和 Z 的处理来简化代码。简化版本可以是这样的。

但是因为有人可能只想烘焙转换而不是进行 All Segs -> Cubics 规范化，所以我添加了一种可能性。因此，如果您想使用 normalize_path=false 来展平变换，这意味着椭圆弧参数也必须展平，并且不可能通过简单地将矩阵应用于坐标来处理它们。两个半径 (rx ry)、x 轴旋转、大弧标志和扫掠标志必须分别处理。所以下面的函数可以展平弧的变换。矩阵参数是一个关系矩阵，它来自已经在 flatten_transformations() 中使用。

// Origin: http://devmaster.net/forums/topic/4947-transforming-an-ellipse/
function arc_transform(a_rh, a_rv, a_offsetrot, large_arc_flag, sweep_flag, endpoint, matrix, svgDOM) {
    function NEARZERO(B) {
        if (Math.abs(B) < 0.0000000000000001) return true;
        else return false;
    }

    var rh, rv, rot;

    var m = []; // matrix representation of transformed ellipse
    var s, c; // sin and cos helpers (the former offset rotation)
    var A, B, C; // ellipse implicit equation:
    var ac, A2, C2; // helpers for angle and halfaxis-extraction.
    rh = a_rh;
    rv = a_rv;

    a_offsetrot = a_offsetrot * (Math.PI / 180); // deg->rad
    rot = a_offsetrot;

    s = parseFloat(Math.sin(rot));
    c = parseFloat(Math.cos(rot));

    // build ellipse representation matrix (unit circle transformation).
    // the 2x2 matrix multiplication with the upper 2x2 of a_mat is inlined.
    m[0] = matrix.a * +rh * c + matrix.c * rh * s;
    m[1] = matrix.b * +rh * c + matrix.d * rh * s;
    m[2] = matrix.a * -rv * s + matrix.c * rv * c;
    m[3] = matrix.b * -rv * s + matrix.d * rv * c;

    // to implict equation (centered)
    A = (m[0] * m[0]) + (m[2] * m[2]);
    C = (m[1] * m[1]) + (m[3] * m[3]);
    B = (m[0] * m[1] + m[2] * m[3]) * 2.0;

    // precalculate distance A to C
    ac = A - C;

    // convert implicit equation to angle and halfaxis:
    if (NEARZERO(B)) {
        a_offsetrot = 0;
        A2 = A;
        C2 = C;
    } else {
        if (NEARZERO(ac)) {
            A2 = A + B * 0.5;
            C2 = A - B * 0.5;
            a_offsetrot = Math.PI / 4.0;
        } else {
            // Precalculate radical:
            var K = 1 + B * B / (ac * ac);

            // Clamp (precision issues might need this.. not likely, but better save than sorry)
            if (K < 0) K = 0;
            else K = Math.sqrt(K);

            A2 = 0.5 * (A + C + K * ac);
            C2 = 0.5 * (A + C - K * ac);
            a_offsetrot = 0.5 * Math.atan2(B, ac);
        }
    }

    // This can get slightly below zero due to rounding issues.
    // it's save to clamp to zero in this case (this yields a zero length halfaxis)
    if (A2 < 0) A2 = 0;
    else A2 = Math.sqrt(A2);
    if (C2 < 0) C2 = 0;
    else C2 = Math.sqrt(C2);

    // now A2 and C2 are half-axis:
    if (ac <= 0) {
        a_rv = A2;
        a_rh = C2;
    } else {
        a_rv = C2;
        a_rh = A2;
    }

    // If the transformation matrix contain a mirror-component 
    // winding order of the ellise needs to be changed.
    if ((matrix.a * matrix.d) - (matrix.b * matrix.c) < 0) {
        if (!sweep_flag) sweep_flag = 1;
        else sweep_flag = 0;
    }

    // Finally, transform arc endpoint. This takes care about the
    // translational part which we ignored at the whole math-showdown above.
    endpoint = endpoint.matrixTransform(matrix);

    // Radians back to degrees
    a_offsetrot = a_offsetrot * 180 / Math.PI;

    var r = ["A", a_rh, a_rv, a_offsetrot, large_arc_flag, sweep_flag, endpoint.x, endpoint.y];
    return r;
}

旧示例：

我做了一个例子，它有一个带有段的路径M Q A A Q M，它应用了转换。路径在 g 内，也应用了 trans。并确保这个 g 在另一个 g 中，该 g 应用了不同的转换。代码可以：

A）首先将所有路径段归一化（感谢 Raphaël 的 path2curve，我对此进行了错误修复，在此修复之后，所有可能的路径段组合终于起作用了：http : //jsbin.com/oqojan/42。原始的 Raphaël 2.1 0.0有错误行为，你可以看到这里，如果不点击路径几次，以产生新的曲线。）

B) 然后使用本机函数getTransformToElement(),createSVGPoint()和来展平转换matrixTransform()。

唯一缺少的是将圆形、矩形和多边形转换为路径命令的方法，但据我所知，你有一个很好的代码。

这是我作为“答案”所做的任何前进进展的更新日志，以帮助通知其他人；如果我以某种方式自己解决问题，我会接受这一点。

更新 1：除了非统一比例的情况外，我已经让绝对 arcto命令完美地工作。以下是补充内容：

// Extract rotation and scale from the transform
var rotation = Math.atan2(transform.b,transform.d)*180/Math.PI;
var sx = Math.sqrt(transform.a*transform.a+transform.c*transform.c);
var sy = Math.sqrt(transform.b*transform.b+transform.d*transform.d);

//inside the processing of segments
if (seg.angle != null){
  seg.angle += rotation;
  // FIXME; only works for uniform scale
  seg.r1 *= sx;
  seg.r2 *= sy;
}

感谢这个答案提供了比我使用的更简单的提取方法，以及用于提取非均匀比例的数学。

只要将所有坐标转换为绝对坐标，所有贝塞尔曲线都可以正常工作；他们的手柄没有什么神奇之处。至于椭圆弧命令，唯一的通用解决方案（处理非均匀缩放，正如您所指出的，在一般情况下，弧命令不能表示）是首先将它们转换为它们的贝塞尔近似值。

https://github.com/johan/svg-js-utils/blob/df605f3e21cc7fcd2d604eb318fb2466fd6d63a7/paths.js#L56..L113（absolutizePath在同一个文件中使用，你的Convert SVG Path to Absolute 命令的直接端口）执行命令前者，但还不是后者。

如何用贝塞尔曲线最好地近似几何弧？链接将弧转换为贝塞尔曲线的数学运算（每个0 < α <= π/2弧段一个贝塞尔曲线段）；本文在页面末尾显示了方程式（其更漂亮的pdf格式在第 3.4.1 节的末尾）。