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

Re: [svg-developers] Re: access svg elements from HTML5

Expand Messages
  • Brian Birtles
    ... I should add a warning that that interface is deprecated so you should test for contentDocument first and use that if available, like Jonathan and Erik s
    Message 1 of 10 , Feb 23, 2012
      (2012/02/24 14:07), Brian Birtles wrote:
      > Hi Diana,
      >
      > I believe the HTMLEmbedElement interface does not include a
      > contentDocument property, unlike HTMLObjectElement (and
      > HTMLIFrameElement etc.). I think you want to use getSVGDocument.[1]
      > Jonathan Watt and Erik Dahlström have each helpfully put together test
      > pages for this.[2][3]

      I should add a warning that that interface is deprecated so you should
      test for contentDocument first and use that if available, like Jonathan
      and Erik's code does.

      Brian
    • Mark T
      Hi Diana, Can you serve the page as svg? The server would have to send this header: Content-Type: image/svg+xml This may simplify the interaction of an embed
      Message 2 of 10 , Feb 24, 2012
        Hi Diana,
        Can you serve the page as svg?
        The server would have to send this header:
        Content-Type:
        image/svg+xml

        This may simplify the interaction of an embed with parent doc.
        (There would be none).

        MarkT

        On Thu, Feb 23, 2012 at 12: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.
        >


        [Non-text portions of this message have been removed]
      • David Dailey
        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
        Message 3 of 10 , Feb 24, 2012
          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]
        • 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 4 of 10 , Feb 24, 2012
            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.