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，这是我第一次尝试用各种属性（background-image，background ..）显示图像，然后我想在onLoad之后直接添加ImageElement。两者都失败了。

我的下一步应该是试用模式，但我不确定我是否可以在Dart中翻译我为javascript阅读的内容。

编辑：能够加载图像也很好，这样我就可以读取尺寸等属性。编辑2：因为我无法添加答案，所以这是我通过检查＆＃34;复制＆＃34;原来的。

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。

在dart中将图像添加到SVG元素

1 个答案: