CODEWITHSUNDEEP
htmlsvgdart
mert
mert

Reputation: 2002

Dart svg ImageElement is not showing up

I try to add a ImageElement to a GElement. Although the <image> element is created under <g> properly, it is not showing up. If I copy the <image> element created by Dart, and add it to html file beforehand, it shows. I am using the following code snippet:

ImageElement aImage = new ImageElement();
aImage.setAttribute('x', '$x');
aImage.setAttribute('y', '$y');
aImage.setAttribute('width', '30');
aImage.setAttribute('height', '30');
aImage.setAttribute('xlink:href', 'http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png');
group.append(a);

Upvotes: 3

Views: 287

Answers (1)

ringstaff
ringstaff

Reputation: 2325

You will have to set the href using getNamespacedAttributes (see this). Also, make sure the group element is on an SvgSvgElement. This worked for me:

svg.SvgSvgElement svgBase = new svg.SvgSvgElement();
svg.ImageElement aImage = new svg.ImageElement();
svg.GElement group = new svg.GElement();


aImage.setAttribute('x', '50');
aImage.setAttribute('y', '50');
aImage.setAttribute('width', '30');
aImage.setAttribute('height', '30');
aImage.getNamespacedAttributes('http://www.w3.org/1999/xlink')['href'] = 'http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png';

group.append(aImage);
svgBase.append(group);
querySelector('#container').append(svgBase);

Upvotes: 4

Related Questions