Dart create and transform an SVG path

问题:

I recently started programming in Dart (www.dartlang.org). Now I try to display an SVG path and scale the path to fit in a div of 20px * 20px;

I do have a path, and I did create a transformation matrix, but how does one apply the matrix to the path?

My code so far:

    // 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....

--EDIT--

I've now read parts of the MDN after reading Carlo's reply. The SVG specs are much more complicated than I was anticipating. I got one step further though.

I now try to apply the transformation matrix to the svg like so:

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

but this does not apply the transformation as I would expect.

The print statement prints a: instance of 'Transform' , so I suspect I still have to apply this transformation somehow?

--END EDIT--

And now I'm lost.

How would I apply the transformation? I could not find any examples and the Dart API reference does not give me enough details to figure it out.

Kind regards, Hendrik Jan

回答1:

Even if it's a different language, the classes implement the interfaces defined by the specification (if you watch closely you can see that the first paragraph of many Dart documentation pages is taken from MDN). So, to apply the matrix you have to create a SVGTransform instance representing that transformation. To get it, look at the transform property: it's an animated value, so you'll need to get its baseVal which is a list of transformations (currently empty). Now on this object you have to call the createSvgTransformFromMatrix method and append the object returned to the transformation list.

In code should be something like this:

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

Since Dart implementation of TransformList is also a List, I think you could also use its add method. Give a look at initialize too.