Loading ...
Sorry, an error occurred while loading the content.

Re: access svg elements from HTML5

Expand Messages
  • Diana
    I found out that the contentDocument is defined when using to embed the svg file in html5 in Safari. So my code actually worked in that
    Message 1 of 10 , Feb 24, 2012
    • 0 Attachment
      I found out that the contentDocument is defined when using <object data ..> to embed the svg file in html5 in Safari. So my code actually worked in that condition. I will try getSVGDocument() later.

      Thanks
      Diana

      --- In svg-developers@yahoogroups.com, "David Dailey" <ddailey@...> wrote:
      >
      > I haven't had a chance to look at your question at all and was glad to see
      > Jake had some suggestions. Just anecdotally, I've noticed that a lot of
      > things governing the relationship between "HTML5" (as it is ambiguously
      > termed in the world at large) and SVG that were somewhat predictable in
      > HTML-SVG discourse, are remarkably dysfunctional across browsers. I think
      > much of this is due to the fact that HTML5 is not yet a stable
      > recommendation. You might want to test to see if what you're doing works
      > anywhere. Sometimes one uses getSVGDocument()instead of contentDocument (see
      > http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#scripting_HTML
      > ).. I used to think of contentDocument as something that was only
      > implemented in one or two browsers, while in the "traditional" HTML - SVG
      > world, getSVGDocument() was the way to go.
      >
      >
      >
      > You might fool around with that and be sure to check out alternative
      > browsers, since they all seem to have different ideas about many of these
      > issues at present.
      >
      >
      >
      > Cheers
      >
      > David
      >
      >
      >
      > From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
      > On Behalf Of Diana
      > Sent: Thursday, February 23, 2012 12:27 AM
      > To: svg-developers@yahoogroups.com
      > Subject: [svg-developers] Re: access svg elements from HTML5
      >
      >
      >
      >
      >
      >
      > Hi Jake,
      >
      > Thanks for your reply.
      >
      > But the svg has already loaded, because it's displayed, and I push a button
      > to execute the code that is trying to get it.
      >
      > Plus, this line: var a = document.getElementById("dialSvg");
      > works well, the result is a HTMLEmbedElement. I checked what is defined in
      > this HTMLEmbedElement, there is no contentDocument defined, thus, the
      > following line:
      >
      > var svgDoc = a.contentDocument;
      > returns null.
      >
      > Any idea?
      >
      > Many thanks
      > -Diana
      > --- In svg-developers@yahoogroups.com
      > <mailto:svg-developers%40yahoogroups.com> , Jacob Beard <jbeard4@> wrote:
      > >
      > > This is a pretty common question, and I think it needs to go in an FAQ
      > > somewhere.
      > >
      > > The reason why it's not currently working in your code snippet is that the
      > > SVG document inside the embed is not yet loaded. You need to add a load
      > > listener to wait for it. You can find a solution for this here:
      > >
      > http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-j
      > avascript/3379830#3379830
      > >
      > > Jake
      > >
      > > On Wed, Feb 22, 2012 at 8:01 PM, Diana <diana.perpignan@> wrote:
      > >
      > > > **
      > > >
      > > >
      > > > Hello all,
      > > >
      > > > I am very new to svg. I am trying to access an element (defined by id)
      > in
      > > > a svg file from HTML5, using jquery if possible, but it's not
      > successful.
      > > > Here is part of the code:
      > > >
      > > > *******************************
      > > > svg definition:
      > > > <svg version="1.1" id="Layer_1"
      > > > xmlns="http://www.w3.org/2000/svg" xmlns:xlink="
      > > > http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%"
      > > > viewBox="0 0 100 100" enable-background="new 0 0 100 100"
      > > > xml:space="preserve">
      > > >
      > > > <path id="dial" fill="#F7941E"
      > > >
      > d="M89.944,50c0-22.091-17.908-40-40-40c-22.092,0-40,17.909-40,40c0,22.092,17
      > .908,40,40,40V50
      > > > H89.944z"/>
      > > > </svg>
      > > >
      > > > In HTML
      > > > <embed src='dial.svg' type='image/svg+xml' id="dialSvg"/>
      > > >
      > > > // the following code is from online reading
      > > > var a = document.getElementById("dialSvg"); // this line is okay, the
      > > > result is HTMLEmbedElement
      > > > var svgDoc = a.contentDocument; // but contentDocument is not even
      > defined
      > > > in HTMLEmbedElement
      > > > var d = svgDoc.getElementById("dial");
      > > > ******************************************
      > > >
      > > > Any help is greatly appreciated.
      > > >
      > > > Thanks
      > > > Diana
      > > >
      > > >
      > > >
      > >
      > >
      > > [Non-text portions of this message have been removed]
      > >
      >
      >
      >
      >
      >
      > [Non-text portions of this message have been removed]
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.