将图像添加到 dart 中的 SVG 元素 [重复]

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

如您所见，有一个 Rectangle，这是我第一次尝试显示具有各种属性（背景图像、背景..）的图像，然后我想在 onLoad 之后直接添加 ImageElement。都失败了。

我的下一步应该是尝试使用模式，但我不确定是否可以在 Dart 中翻译我为 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 并在 onLoad 触发时更改为 display: auto。