다트의 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); 
}); 

onLoad 직후의 ImageElement 둘 다 실패했습니다.

내 다음 단계는 패턴으로 시도해야하지만, 내가 자바 스크립트로 읽은 부분을 다트로 번역 할 수 있는지는 잘 모르겠습니다.

편집 : 치수와 같은 속성을 읽을 수 있도록 이미지를로드하는 것이 좋을 것입니다. 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

는하지만 요소가 DOM에 추가되지 않습니다 전에 onLoad 이벤트가 발생하지 않을 것으로 가정합니다. 요소를 만든 직후에 이미지를 추가해야합니다. onLoad가 발생하면 display: none을 설정하고 display: auto으로 변경할 수 있습니다.