svg - Dart 创建和转换 SVG 路径

Question

我最近开始使用 Dart (www.dartlang.org) 进行编程。
现在我尝试显示一个 SVG 路径并缩放路径以适合 20px * 20px 的 div；

我确实有一条路径，并且我确实创建了一个转换矩阵，但是如何将矩阵应用于路径？

到目前为止我的代码:

    // create an svg element
    SvgSvgElement svg = new SvgSvgElement();
    // create a path
    PathElement path = new PathElement();
    // draw something
    path.setAttribute('d', myPath);
    // add the path to the svg
    svg.append(path);
    // add the svg to a table cell allready in the DOM
    myDiv.append(svg);

    // start scaling
    // get bounding box
    Rect bb = path.getBBox();
    num xx = bb.width ==0 ? 1 : 20/bb.width;
    num yy = bb.height==0 ? 1 : 20/bb.height;
    num mm = min(xx, yy);

    // create svg transformation matrix to scale the image
    // |  x-prev  |   |a c e||  x-new  |   | ax-new + cy-new + e |
    // |  y-prev  | = |b d f||  y-new  | = | bx-new + dy-new + f |
    // |  z-prev  |   |0 0 1||    1    |   |         1           |
    Matrix matrix = svg.createSvgMatrix();
    matrix.a = mm; // xx
    matrix.b = 0;
    matrix.c = 0;
    matrix.d = mm; // yy
    matrix.e = -(bb.x * mm); // dx
    matrix.f = -(bb.y * mm); // dy

    // do something here to apply the transformation....

--编辑--

在阅读了 Carlo 的回复后，我现在已经阅读了 MDN 的部分内容。 SVG 规范比我预期的要复杂得多。不过我又进了一步。

我现在尝试将转换矩阵应用于 svg，如下所示:

    var a = svg.createSvgTransformFromMatrix(matrix);
    print('a: ' + a.toString());

但这并不像我期望的那样应用转换。

打印语句打印
a:“变换”实例
，所以我怀疑我仍然必须以某种方式应用这种转换？

--结束编辑--

现在我迷路了。

我将如何应用转换？
我找不到任何示例，并且 Dart API 引用没有给我足够的细节来弄清楚。

亲切的问候，
亨德里克·扬

Answer 1

即使是不同的语言，这些类也实现了the specification 定义的接口(interface)。 (如果你仔细观察，你会发现许多 Dart 文档页面的第一段取自 MDN)。因此，要应用矩阵，您必须创建一个 SVGTransform 表示该转换的实例。要获得它，请查看 transform 属性:它是一个动画值，所以你需要得到它的 baseVal 这是一个转换列表(当前为空)。现在在这个对象上你必须调用 createSvgTransformFromMatrix 方法并将返回的对象附加到转换列表中。

在代码中应该是这样的:

TransformList pathTransformList = path.transform.baseVal;
pathTransformList.appendItem(pathTransformList.createSvgTransformFromMatrix(matrix));

自从 Dart 实现 TransformList也是 List ，我想你也可以使用它的 add 方法。看看 initialize 也。