Does SVGElement.svg work?

125 views
Skip to first unread message

Tim

unread,
May 3, 2012, 6:23:56 PM5/3/12
to General Dart Discussion
I'm trying to use the svg constructor but with no luck so far.

I'm attempting to construct an svg element like so:

var svg = new SVGElement.svg("""
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
...
</svg>
""");

Code taken from: https://code.google.com/p/dart/source/browse/trunk/dart/samples/logo/logo.dart

Nothing displays on screen when this is added to the DOM, also
according to the debugger this code returns an instance of _TextImpl
which would seem incorrect, shouldn't it be something like
_SVGGElementImpl?


Ruudjah

unread,
May 3, 2012, 7:16:54 PM5/3/12
to General Dart Discussion
I have used SVG wih dart successfully with SVGElement.tag, see
https://github.com/generateui/Dartan/blob/master/ui/Visual.dart. Afaik
there was a bug related to SVG someone else stumbled upon, see
https://groups.google.com/a/dartlang.org/group/misc/browse_thread/thread/19877709006c71eb.
I can't find it in the bugtracker though.

Ruud

On May 4, 12:23 am, Tim <timothydd...@gmail.com> wrote:
> I'm trying to use the svg constructor but with no luck so far.
>
> I'm attempting to construct an svg element like so:
>
> var svg = new SVGElement.svg("""
>   <svg xmlns="http://www.w3.org/2000/svg"
>        version="1.1"
>        ...
>   </svg>
>   """);
>
> Code taken from:https://code.google.com/p/dart/source/browse/trunk/dart/samples/logo/...

Mike-Delphi-SQL-TX

unread,
May 4, 2012, 12:34:49 AM5/4/12
to General Dart Discussion
Tim,
I too have had issues with the .svg() constructor on SVGElement. Not
sure if the root-cause is at all related, but in case this helps...
The problem I have appears perhaps related to Issue 772:
http://code.google.com/p/dart/issues/detail?id=772

I encountered this a while ago and had to switch to using the .tag()
constructor version instead (which is a bit of a pain by comparison
when building a decent-sized SVG structure).

I had some brief notes in my code about my issue where I wrote a note
to myself that:
"the .svg() constructor technique only works inside HTML docs (vs.
within pure SVG docs), as the .svg() constructor apparently treats the
passed in value as "InnerHtml" and the SVG docs don't recognize
InnerHtml as a property on SVGElement even though they are a sub-
interface of Element (which is where InnerHtml originates)".

I.e., the .InnerHtml property on an SVG element works for when I am
dealing with an HTMLdoc with Embedded SVG doc, but not when .InnerHtml
is referenced from within a standalone .SVG doc. Something is
apparently awry in the SVGElement implementation depending on what doc-
type "owns" it. Maybe that affects your situation somehow too?


On May 3, 5:23 pm, Tim <timothydd...@gmail.com> wrote:
> I'm trying to use the svg constructor but with no luck so far.
>
> I'm attempting to construct an svg element like so:
>
> var svg = new SVGElement.svg("""
>   <svg xmlns="http://www.w3.org/2000/svg"
>        version="1.1"
>        ...
>   </svg>
>   """);
>
> Code taken from:https://code.google.com/p/dart/source/browse/trunk/dart/samples/logo/...

Anton Muhin

unread,
May 4, 2012, 6:35:23 AM5/4/12
to Tim, General Dart Discussion
Tim,

SVG should work, but be aware of
http://code.google.com/p/dart/issues/detail?id=2856

Roughly, please add <script>navigator.webkitStartDart()</script> right
before you close document body (yes, it's ugly).

If you still see some problems, please, let us know.

Happy darting!

yours,
anton.

Tim

unread,
May 4, 2012, 7:36:13 AM5/4/12
to General Dart Discussion
Hey Thanks for the feedback everyone.

Anton, adding that script before the close of the body tag doesn't
seem to change anything in my test case. That ticket you linked to
does appear to differ from my case though as I don't see any svg
content at all, whereas that one still shows content albeit static.
Whilst their sample code is using the .svg() constructor it is simpler
one line tags all of which are added as children of an empty
SVGElement constructed without any string parsing so the use case
appears to differ a bit.

Ruud and Mike, I don't think that .tag() is going to satisfy my use
case as it implies drawing the rest of the SVG element
programmatically piece by piece. I need for the user to be able to
select from a list of svg files and then have the selected one
display. Figured I'd use a HTTP request to load the selected svg as
plain text and then have the .svg() constructor parse the string,
sound reasonable enough or am I architecting it wrong?

Thanks for the link to http://code.google.com/p/dart/issues/detail?id=772,
has given me a working solution for now.

svgElement = new Element.tag('div');
svgElement.innerHTML = """
        <svg xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        ...
   </svg>
   """;

Gives me a valid element that displays the svg correctly, parsed from
a string too. Should allow me to achieve the desired functionality I
mentioned earlier.

Very new to Dart, any feedback greatly appreciated.

Thanks,
Tim

On May 4, 11:35 am, Anton Muhin <ant...@google.com> wrote:
> Tim,
>
> SVG should work, but be aware ofhttp://code.google.com/p/dart/issues/detail?id=2856
>
> Roughly, please add <script>navigator.webkitStartDart()</script> right
> before you close document body (yes, it's ugly).
>
> If you still see some problems, please, let us know.
>
> Happy darting!
>
> yours,
> anton.
>
>
>
>
>
>
>
> On Fri, May 4, 2012 at 2:23 AM, Tim <timothydd...@gmail.com> wrote:
> > I'm trying to use the svg constructor but with no luck so far.
>
> > I'm attempting to construct an svg element like so:
>
> > var svg = new SVGElement.svg("""
> >  <svg xmlns="http://www.w3.org/2000/svg"
> >       version="1.1"
> >       ...
> >  </svg>
> >  """);
>
> > Code taken from:https://code.google.com/p/dart/source/browse/trunk/dart/samples/logo/...

Anton Muhin

unread,
May 5, 2012, 6:18:43 AM5/5/12
to Tim, General Dart Discussion
Tim,

if you may send me a tiny problematic snippet I'd be happy to investigate.

Just FYI though: I won't be able to look into it until end of the
following week.

yours,
anton.
Reply all
Reply to author
Forward
0 new messages