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

Re: access svg elements from HTML5

Expand Messages
  • Diana
    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,
    Message 1 of 10 , Feb 22, 2012
    • 0 Attachment
      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, 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-javascript/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]
      >
    • JERROLD WARREN MADDOX
      Here are 4 different ways you can try:  
      Message 2 of 10 , Feb 23, 2012
      • 0 Attachment
        Here are 4 different ways you can try:

        <object data="rectspercent.svg" type="image/svg+xml"
        width="100" height="100">
        </object>  
        <embed src="rectspercent.svg"
        width="100" height="100" type="image/svg+xml"/>   <iframe src="rectspercent.svg" type="image/svg+xml" width="100" height="100" frameborder="0"></iframe>  

        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

        <defs>
        <g id="squares">

        <rect x="0" y="0" height="100%" width="100%" fill="#900" />
        <rect x="1%" y="1%" height="98%" width="98%" fill="#f00" />
        <rect x="2%" y="2%" height="96%" width="96%" fill="#800" />
        <rect x="3%" y="3%" height="94%" width="94%" fill="#e00" />
        <rect x="4%" y="4%" height="92%" width="92%" fill="#700" />
        <rect x="5%" y="5%" height="90%" width="90%" fill="#d00" />
        <rect x="6%" y="6%" height="88%" width="88%" fill="#600" />
        <rect x="7%" y="7%" height="86%" width="86%" fill="#c00" />
        <rect x="8%" y="8%" height="84%" width="84%" fill="#500" />
        <rect x="9%" y="9%" height="82%" width="82%" fill="#b00" />
        <rect x="10%" y="10%" height="80%" width="80%" fill="#400" />
        <rect x="11%" y="11%" height="78%" width="78%" fill="#a00" />
        <rect x="12%" y="12%" height="76%" width="76%" fill="#300" />
        <rect x="13%" y="13%" height="74%" width="74%" fill="#900" />
        <rect x="14%" y="14%" height="72%" width="72%" fill="#200" />
        <rect x="15%" y="15%" height="70%" width="70%" fill="#800" />
        <rect x="16%" y="16%" height="68%" width="68%" fill="#100" />
        <rect x="17%" y="17%" height="66%" width="66%" fill="#700" />
        <rect x="18%" y="18%" height="64%" width="64%" fill="#000" />

        </g>
        </defs>


        <use xlink:href="#squares" x="0" y="0" opacity="1" transform="scale(1)"/>

        </svg>

        ----- Original Message -----
        From: "Diana" <diana.perpignan@...>
        To: svg-developers@yahoogroups.com
        Sent: Wednesday, February 22, 2012 8:01:13 PM
        Subject: [svg-developers] access svg elements from HTML5






        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
      • Diana
        Hi Jake, Thanks for your response. I tried to post a reply last night, but I don t know it doesn t show. In my case, the svg is actually loaded, because it
        Message 3 of 10 , Feb 23, 2012
        • 0 Attachment
          Hi Jake,
          Thanks for your response. I tried to post a reply last night, but I
          don't know it doesn't show.
          In my case, the svg is actually loaded, because it shows, and I push a
          button to execute the code to access the inside element of that svg.
          Also, the first line: var a = document.getElementById("dialSvg"); works
          fine, returns a HTMLEmbedElement. The problem is on: var svgDoc =
          a.contentDocument; From debug, I see that contentDocument is not even
          defined in HTMLEmbedElement, thus returns null.
          I tried using all three ways (embed, object data, iframe) to embed the
          svg in html.
          Any idea?
          Thanks-Diana
          --- In svg-developers@yahoogroups.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-wi\
          th-javascript/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.09\
          2,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]
        • Brian Birtles
          ... Hi Diana, I believe the HTMLEmbedElement interface does not include a contentDocument property, unlike HTMLObjectElement (and HTMLIFrameElement etc.). I
          Message 4 of 10 , Feb 23, 2012
          • 0 Attachment
            (2012/02/23 14:26), Diana wrote:
            > 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.

            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]

            Regards,

            Brian

            [1] http://www.w3.org/TR/SVG/struct.html#InterfaceGetSVGDocument
            [2] https://jwatt.org/svg/demos/getSVGDocument.html
            [3]
            http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html
          • 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 5 of 10 , Feb 23, 2012
            • 0 Attachment
              (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 6 of 10 , Feb 24, 2012
              • 0 Attachment
                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 7 of 10 , Feb 24, 2012
                • 0 Attachment
                  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 8 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.