Tạo một đường dẫn trong phi tiêu: svg

Question

Tôi mới để sử dụng Dart, và tôi đã cố gắng để cảng trên một số mã javascript rằng tôi đã có mà làm việc với svg, tạo ra một con đường với một số phân khúc trong nó, nhưng tôi m đấu tranh để hiểu cách API hoạt động.

Các mã sau đây sẽ không chạy, nhưng nó có lẽ minh họa những gì tôi muốn làm:

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

Tuy nhiên, theo như tôi hiểu từ các tài liệu:

• createSvgPathSegArcAbs tạo một đoạn đường dẫn không bị phân tách
• pathSegList là cuối cùng, vì vậy bạn không thể thêm vào nó sau khi xây dựng
• Trình tạo PathElement dường như không mất bất kỳ đối số nào

Tôi có thiếu thứ gì đó về cách Dart hoạt động hoặc tài liệu nào đó trong thư viện svg không? Tôi đã dành một vài giờ nhìn vào các tài liệu, googling, và nhìn vào các bài kiểm tra, nhưng tôi đã không tìm thấy bất cứ điều gì mà dường như bao gồm này (các xét nghiệm dường như tạo ra những thứ bằng cách sử dụng mã HTML, chứ không phải là API).

Bất cứ điều gì mà chỉ cho tôi đi đúng hướng sẽ được rất nhiều đánh giá cao!

Cập nhật

Tôi đã dành nhiều thời gian xem xét các chức năng, và 'dứt khoát' của pathSegList không nên ngăn ngừa nó khỏi bị thay đổi (nó không phải là const), chỉ cần thay thế.

Tuy nhiên, chức năng khác nhau như "add" được thực hiện một cách rõ ràng với những ngoại lệ nếu bạn cố gắng và gọi cho họ, trong khi một vài chức năng (như append) đều được thực hiện tự nhiên.

Theo debugger:

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

sẽ nối thêm một segement con đường, nhưng điều này sẽ không có mặt trong thuộc tính 'innerHTML' cũng trong trang HTML thức ...

Tôi bắt đầu nghĩ rằng hỗ trợ svg đơn giản không phải là "hoàn thành", và tôi đang bị cám dỗ một chút khi chỉ chuyển sang canvas và/hoặc WebGL.

Answer 1

tôi đã có thể tạo ra một yếu tố đường dẫn và thêm các phân đoạn đường dẫn đến nó bằng cách sử dụng phương pháp appendItem của 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());