Dart创建和转换SVG路径

我最近开始在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:Transform的实例 ，所以我怀疑我还是要以某种方式应用这个转换

--结束编辑--

现在我迷路了

我将如何应用转换？ 我找不到任何示例，Dart API参考也没有给我足够的细节来理解它

亲切问候,，

---

Hendrik Jan

即使是另一种语言，这些类也实现了由定义的接口（如果仔细观察，您可以看到许多Dart文档页面的第一段都取自MDN）。因此，要应用矩阵，必须创建一个表示该转换的实例。要获取它，请查看属性：它是一个动画值，因此需要获取它的值，它是一个变换列表（当前为空）。现在，在这个对象上，您必须调用该方法并将返回的对象附加到转换列表中

在代码中应该是这样的：

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

---

由于

TransformList

的Dart实现也是一个

List

，我认为您也可以使用它的方法。也来看看。

你好，卡洛。谢谢你迄今为止的帮助。我现在可以创建svg转换，但不确定如何将转换应用于svg。有什么建议吗？查看我编辑的问题。您可以通过使用方法

appendItem

将转换添加到

TransformList

对象来应用它。尝试类似于

path.transform.baseVal.appendItem（a）

。