Creating a path in dart:svg

Question

I'm new to using Dart, and I've been trying to port over some javascript code that I had which worked with svg, creating a path with some segments in it, but I'm struggling to understand how the API for it works.

The following code won't run, but it perhaps illustrates what I'd like to do:

Element i = query("#divsvg");
svg.SvgSvgElement s = new svg.SvgSvgElement();
i.append(s);

svg.PathElement p = new svg.PathElement();
p.pathSegList.add(
      p.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false)
   );

s.children.add(p);

However, as far as I understand from the documentation:

• createSvgPathSegArcAbs creates an un-parented path segment
• pathSegList is final, so you can't add to it after construction
• The PathElement constructor doesn't seem to take any arguments

Am I missing something about how Dart works, or something in the documentation for the svg library? I've spent a few hours looking at the docs, googling, and looking at the tests, but I haven't found anything that seems to cover this (the tests seem to create things using HTML code, rather than the API).

Anything that points me in the right direction will be very much appreciated!

Update

I've spent more time looking at the functions, and the 'finality' of the pathSegList shouldn't prevent it from being changed (it's not const), just replaced.

However, various functions like "add" are explicitly implemented with exceptions if you try and call them, while a few functions (like append) are implemented natively.

According to the debugger:

p.pathSegList.append(
    p.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false)
);

Will append a path segement, but this will not be present in the 'innerHTML' attribute nor in the final page HTML...

I'm starting to think that the svg support is simply not a "finished", and am getting a bit tempted to just port to canvas, and/or WebGL.

Answer 1

I was able to create a path element and add path segments to it using the appendItem method of PathSegList:

var div = query('#container');
var svgElement = new svg.SvgSvgElement();
div.append(svgElement);
path = new svg.PathElement();
svgElement.append(path);

segList = path.pathSegList;

segList.appendItem(path.createSvgPathSegMovetoAbs(50, 50));
segList.appendItem(path.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false));
segList.appendItem(path.createSvgPathSegClosePath());