Добавить изображение в элемент SVG в dart

Question

Я пытаюсь показать (взаимозаменяемое) изображение в качестве фона для эллипса или других различных вещей, которыми я буду манипулировать позже. Проблема в том, что я не могу найти, как правильно загрузить изображение.

Мой код:

DivElement div = querySelector("#mainDiv"); 
svg.SvgElement svgElement = new svg.SvgSvgElement(); 
div.append(svgElement); 
//div.setAttribute("background-color", "yellow"); 

svg.RectElement rec = new svg.RectElement(); 
rec.setAttribute("x", "0"); 
rec.setAttribute("y", "0"); 
rec.setAttribute("width",div.clientWidth.toString()); 
rec.setAttribute("height", div.clientHeight.toString()); 
//svgElement.children.add(rec); 

Ellipse ell = new Ellipse() //my class. shows and allow to move it 
..cx = 100 
..cy= 100 
..rx= 50 
..ry= 50; 
svgElement.children.add(ell.ellipse); 
ImageElement image = new ImageElement(src: "2.jpg"); 
image.onLoad.listen((e) { 
    svgElement.children.add(image); 
}); 

Как вы можете видеть, что есть прямоугольник, который был моим первым попытка показать изображение с различными атрибутами (фоновое изображение, фон ..), то я думал, чтобы добавить ImageElement сразу после onLoad. Обе ошибки.

Следующим шагом должен быть пример с шаблонами, но я не уверен, могу ли я перевести в Дарт то, что я прочитал для javascript.

Редактировать: Было бы неплохо загрузить изображение, чтобы я мог читать атрибуты, такие как размеры. Edit2: Поскольку я не могу добавить ответ, вот код, который я сделал, проверив «дубликат» оригинала.

import 'dart:svg' as svg; 
//... 
DivElement div = querySelector("#mainDiv"); 
svg.SvgElement svgElement = new svg.SvgSvgElement(); 
div.append(svgElement); 

Ellipse ell = new Ellipse() 
..cx = 100 
..cy= 100 
..rx= 50 
..ry= 50; 

svg.ImageElement image = new svg.ImageElement(); 

svgElement.children.add(image); 
image.setAttribute('x', '0'); 
image.setAttribute('y', '0'); 
image.setAttribute('width', '100%'); 
image.setAttribute('height', '100%'); 
image.getNamespacedAttributes('http://www.w3.org/1999/xlink')['href'] = '2.jpg'; 

svgElement.children.add(ell.ellipse); 

Answer 1

Я не пробовал, но я предполагаю, что onLoad событие не срабатывает до того, как элемент не добавляется в DOM. Вы должны добавить изображение сразу после создания элемента. Вы также можете установить display: none и изменить на display: auto, когда onLoad пожаров.