Tworzenie ścieżki w rzutce: svg

Question

Jestem nowy w używaniu Dart, i próbowałem przenosić kod JavaScript, który miałem, który działał z svg, tworząc ścieżkę z niektórymi segmentami, ale ja ' Zmagam się, aby zrozumieć, jak działa API.

Poniższy kod nie będzie działał, ale to chyba ilustruje to, co chciałabym zrobić:

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); 

Jednak, o ile rozumiem z dokumentacji:

• createSvgPathSegArcAbs tworzy niepodparty segment ścieżki
• Znacznik pathSegList jest ostateczny, więc nie można dodać do niego po zbudowaniu
• Konstruktor PathElement wydaje się nie brać Wszelkie argumenty

Am I brakuje czegoś o tym, jak Dart działa, czy coś w dokumentacji biblioteki SVG? Spędziłem kilka godzin patrząc na dokumenty, szukając google i patrząc na testy, ale nie znalazłem niczego, co mogłoby to pokryć (testy wydają się tworzyć rzeczy przy użyciu kodu HTML, a nie API).

Wszystko, co wskaże mi właściwy kierunek, będzie bardzo docenione!

Aktualizacja

spędziłem więcej czasu patrząc na funkcje, a „ostateczność” z pathSegList nie powinno zapobiec jego zmianie (to nie jest const), po prostu wymienić.

Jednak różne funkcje, takie jak "dodaj", są jawnie zaimplementowane z wyjątkami, jeśli spróbujesz je wywołać, podczas gdy kilka funkcji (np. Dołączanie) jest wprowadzanych natywnie.

Według debuggera:

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

dołączy do segement drogi, ale to nie będzie obecny w atrybucie „InnerHTML” ani w ostatecznej stronie HTML ...

jestem zaczynamy myśleć, że obsługa svg nie jest po prostu "skończona" i zaczyna się kusić, by po prostu przenieść się na płótno i/lub WebGL.

Answer 1

że udało się stworzyć element ścieżki i dodać do niego segmentów ścieżek stosując metodę appendItem z 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());