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....
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?
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.
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));
Answered By – Carlo Cannas
Answer Checked By – David Goodson (FlutterFixes Volunteer)