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:"Transform"的实例，所以我怀疑我仍然必须以某种方式应用此转换？

--结束编辑--

现在我迷路了。

我将如何应用转换？我找不到任何例子，Dart API参考资料也没有给我足够的细节来搞清楚。

谨致问候，Hendrik Jan

Answer 1

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

代码应该是这样的：

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

由于TransformList的Dart实现也是List，我认为您也可以使用它的add方法。还可以看看initialize。