Append SVG elements to DOM

ibs

unread,

Nov 10, 2011, 6:01:55 PM11/10/11

to General Dart Discussion

Hi *,

is it possible to append SVG elements to the body element? Following
doesn't work for me:

HTMLDocument doc = window.document;

Element svgElement = doc.createElementNS('http://www.w3.org/2000/
svg', 'svg');
svgElement.setAttributeNS(null, "id", "svgDia");
svgElement.setAttributeNS(null, "width", "700");
svgElement.setAttributeNS(null, "height", "700");
svgElement.setAttributeNS(null, "x", "0");
svgElement.setAttributeNS(null, "y", "0");
doc.body.appendChild(svgElement);

Element rect = doc.createElementNS('http://www.w3.org/2000/svg',
'rect');
rect.setAttributeNS(null, "x", "30");
rect.setAttributeNS(null, "y", "30");
rect.setAttributeNS(null, "width", "50");
rect.setAttributeNS(null, "height", "50");
rect.setAttributeNS(null, "id", "myRect");
rect.setAttributeNS(null, "fill", "blue");
svgElement.appendChild(rect);

Any ideas?

ibs

unread,

Nov 12, 2011, 7:57:50 AM11/12/11

to General Dart Discussion

Hi,

I am trying to add an embedded <svg> image to the <body>. Second step
is to add a rect to the svg image. It works in JavaScript, following
lines creates a SVG rect in JS:

var newRect = document.createElementNS(svgNS, "rect");

newRect.setAttributeNS(null,"x", newElementX);
newRect.setAttributeNS(null,"y", newElementY);

newRect.setAttributeNS(null, "width", mousePosX - newElementX);
newRect.setAttributeNS(null, "height", mousePosY -
newElementY);

newRect.setAttributeNS(null, "fill", "white");
newRect.setAttributeNS(null, "stroke", "#4407f8");
newRect.setAttributeNS(null, "stroke", "#4407f8");

document.getElementById("svgDia").appendChild(newRect);

As a Java/C# developer, JavaScript is not my favorite language. So, I
am trying to get it work with Dart.

In Dart, it appends the svg element and the rect element to the DOM,
but they aren't recognized as SVG elements and therefore they aren't
visible on the HTML page.

Currently, Dart has no support for SVG (see Issue 311,
http://code.google.com/p/dart/issues/detail?id=311). Is there a
workaround to work with SVG, at least until the "Issue 311" is
resolved?

Thanks

Iph

unread,

Nov 12, 2011, 3:03:23 PM11/12/11

to General Dart Discussion

Not sure if this is a "hackish" way of doing things, but you could put
it into a div/span container like so:
HTMLDocument doc = window.document;
HTMLDivElement dcontainer = doc.createElement('div');
dcontainer.innerHTML= '''

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example rect01 - rectangle with sharp corners</desc>


<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>

<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</svg>
''';
doc.body.appendChild(dcontainer);

It makes it so that writing the svg isn't like 300 lines of redundant
code as well, especially with dart's awesome string interpolation.

Bob Nystrom

unread,

Nov 14, 2011, 12:48:02 PM11/14/11

to ibs, General Dart Discussion

On Sat, Nov 12, 2011 at 4:57 AM, ibs <ibs...@googlemail.com> wrote:

Currently, Dart has no support for SVG (see Issue 311,
http://code.google.com/p/dart/issues/detail?id=311). Is there a
workaround to work with SVG, at least until the "Issue 311" is
resolved?

Dart has two APIs for working with the DOM: "dart:dom" and "dart:html". The first one closely mirrors the official DOM API you're familiar with in JS. I believe it supports SVG. If not, that's a bug.

The other library, "dart:html" is generally much more pleasant to use than "dart:dom", but isn't as full-featured. In particular, it does not support SVG yet. The bug you mention here is specifically about that lib. If you #import("dart:dom"), you should be able to use SVG just fine.

- bob

Stephen Adams

unread,

Nov 14, 2011, 12:56:18 PM11/14/11

to Bob Nystrom, ibs, General Dart Discussion

We need to turn on SVG before it will work properly.

The current dart:dom and dart:html libraries are built with SVG disabled.

There is a more to it that changing a switch - the current library code generation will generate illegal Dart code for SVG. The task is pretty near the top of my list and I plan to get to it this week.

ibs

unread,

Nov 15, 2011, 5:56:55 PM11/15/11

to General Dart Discussion

Thanks for the answers.

I hope the next release of the Dart Editor supports SVG, so I can try
it to create some SVG images.

On 14 Nov., 18:56, Stephen Adams <s...@google.com> wrote:
> We need to turn on SVG before it will work properly.
> The current dart:dom and dart:html libraries are built with SVG disabled.
>
> There is a more to it that changing a switch - the current library code
> generation will generate illegal Dart code for SVG. The task is pretty
> near the top of my list and I plan to get to it this week.
>
>
>
>
>
>
>

> On Mon, Nov 14, 2011 at 9:48 AM, Bob Nystrom <rnyst...@google.com> wrote:

Larry Maccherone

unread,

Dec 2, 2011, 8:43:13 AM12/2/11

to General Dart Discussion

According to this, it looks like SVG elements are now available via
dart:dom. Any update on when we might see them in dart:html?

Bob Nystrom

unread,

Dec 2, 2011, 1:59:46 PM12/2/11

to Larry Maccherone, General Dart Discussion

Right now, the dart:html guys are working to get the current API stable and documented so that people can actually learn it. It might be a while before they can get to SVG.

If you'd like to file a bug for it, that will ensure we don't forget about it. Thanks!

- bob

ibs

unread,

Dec 22, 2011, 10:11:10 AM12/22/11

to General Dart Discussion

Is it already possible to create and add a SVGRect with dart:html or
dart:dom?

I can't find a class to create a svg rect element. SVGRect is an
interface but how can I create an instance of it?

Thanks

ibs

unread,

Dec 22, 2011, 11:19:30 AM12/22/11

to General Dart Discussion

The class SVGRectElementWrappingImplementation implements
SVGRectElement.
But how can I call the constructor of
SVGRectElementWrappingImplementation to create rects?

Are there some SVG examples or unit tests in the source repository?

Bob Nystrom

unread,

Dec 22, 2011, 2:14:05 PM12/22/11

to ibs, General Dart Discussion

On Thu, Dec 22, 2011 at 8:19 AM, ibs <ibs...@googlemail.com> wrote:

The class SVGRectElementWrappingImplementation implements
SVGRectElement.
But how can I call the constructor of
SVGRectElementWrappingImplementation to create rects?

Our HTML library isn't totally done yet. One of the big missing pieces is that we haven't defined constructors for all of the types that should have them. The SVG classes probably fall under that problem.

Are there some SVG examples or unit tests in the source repository?

Alas, no. We auto-generate much of the DOM and HTML libraries by scraping the DOM IDL and creating Dart code, so (unfortunately) a lot of it hasn't been tested yet. All of this is brand new, so we've still got a ways to go.

In the meantime, the simplest workaround is usually:

new Element.html('some HTML here...');

If what you're trying to construct can be represented in HTML, that should create the appropriate object for you.

- bob

ibs

unread,

Dec 23, 2011, 4:30:38 AM12/23/11

to General Dart Discussion

Thanks, I am trying to add some SVG elements (rects, circles) to the
DOM and change the attributes of existing elements.

Following snippet doesn't work...

Element svgElement = document.query('#mySvgElement');
svgElement.on.click.add((Event e){

window.alert("click event");

});

HTML file:

<svg id="mySvgElement" width="700" height="700">
<rect id="myRect" x="10" y="10" width="40" height="50"

fill="yellow" stroke="navy" stroke-width="10" />
</svg>

I will wait for a Dart editor build with more SVG support. In the
meantime, I will try the canvas classes instead of SVG.

Reply all

Reply to author

Forward