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

jQuery.SVG - javascript embedded in an SVG document

Expand Messages
  • Sentra Systems
    Hi Does anyone have a working example of using jQuery selectors within the SVG DOM. The examples on http://keith-wood.name/svg.html show creating new elements
    Message 1 of 5 , May 21, 2009
      Hi

      Does anyone have a working example of using jQuery selectors within the
      SVG DOM. The examples on http://keith-wood.name/svg.html show creating
      new elements with the svg DOM but not querying.

      With the below SVG fragment, how would I get all the 'svg:rect' elements
      below the id 'main'?
      I've tried $("#main > 'svg:rect') , but that returns nothing, though
      $("#main") returns the group.

      Confusedly

      :)

      Dave


      <svg:g id="main" >
      <svg:rect rx="5" ry="5" fill="antiquewhite" height="767"
      width="1023" x="0" y="0" />
      <svg:text style=" font-size:10px" x="512" y="383">main</svg:text>

      <svg:g id="TreemapOutputSVG" >
      <svg:rect rx="5" ry="5" fill="#FFFF00" height="747" width="538"
      x="382" y="10" />
      <svg:text style=" font-size:10px" x="651"
      y="383">Treemap::Output::SVG</svg:text>
      <svg:g id="saveSVG" >
      <svg:rect rx="5" ry="5" fill="gray" height="68" width="518" x="392"
      y="660" />
      <svg:text style="font-size:10px" x="651" y="694">save SVG</svg:text>
      </svg:g>
      </svg:g>
    • Domenico Strazzullo
      Hi, I don t use jQuery but it looks like a matching quotes problem, try $( #main svg:rect ) Domenico
      Message 2 of 5 , May 22, 2009
        Hi,

        I don't use jQuery but it looks like a matching quotes problem, try $("#main > 'svg:rect'")

        Domenico


        --- In svg-developers@yahoogroups.com, Sentra Systems <sentra.systems@...> wrote:
        >
        > Hi
        >
        > Does anyone have a working example of using jQuery selectors within the
        > SVG DOM. The examples on http://keith-wood.name/svg.html show creating
        > new elements with the svg DOM but not querying.
        >
        > With the below SVG fragment, how would I get all the 'svg:rect' elements
        > below the id 'main'?
        > I've tried $("#main > 'svg:rect') , but that returns nothing, though
        > $("#main") returns the group.
        >
        > Confusedly
        >
        > :)
        >
        > Dave
        >
        >
        > <svg:g id="main" >
        > <svg:rect rx="5" ry="5" fill="antiquewhite" height="767"
        > width="1023" x="0" y="0" />
        > <svg:text style=" font-size:10px" x="512" y="383">main</svg:text>
        >
        > <svg:g id="TreemapOutputSVG" >
        > <svg:rect rx="5" ry="5" fill="#FFFF00" height="747" width="538"
        > x="382" y="10" />
        > <svg:text style=" font-size:10px" x="651"
        > y="383">Treemap::Output::SVG</svg:text>
        > <svg:g id="saveSVG" >
        > <svg:rect rx="5" ry="5" fill="gray" height="68" width="518" x="392"
        > y="660" />
        > <svg:text style="font-size:10px" x="651" y="694">save SVG</svg:text>
        > </svg:g>
        > </svg:g>
        >
      • Sentra Systems
        Hi That was just a typo on my part, I tried both #main svg:rect ) and #main svg:rect ) to get child and descendant rects, but neither worked. ... Dave
        Message 3 of 5 , May 22, 2009
          Hi

          That was just a typo on my part, I tried both "#main 'svg:rect'") and
          "#main > 'svg:rect'") to get child and descendant rects, but neither
          worked.

          :)

          Dave


          Domenico Strazzullo wrote:
          >
          >
          > Hi,
          >
          > I don't use jQuery but it looks like a matching quotes problem, try
          > $("#main > 'svg:rect'")
          >
          > Domenico
          >
          > --- In svg-developers@yahoogroups.com
          > <mailto:svg-developers%40yahoogroups.com>, Sentra Systems
          > <sentra.systems@...> wrote:
          > >
          > > Hi
          > >
          > > Does anyone have a working example of using jQuery selectors within the
          > > SVG DOM. The examples on http://keith-wood.name/svg.html
          > <http://keith-wood.name/svg.html> show creating
          > > new elements with the svg DOM but not querying.
          > >
          > > With the below SVG fragment, how would I get all the 'svg:rect'
          > elements
          > > below the id 'main'?
          > > I've tried $("#main > 'svg:rect') , but that returns nothing, though
          > > $("#main") returns the group.
          > >
          > > Confusedly
          > >
          > > :)
          > >
          > > Dave
          > >
          > >
          > > <svg:g id="main" >
          > > <svg:rect rx="5" ry="5" fill="antiquewhite" height="767"
          > > width="1023" x="0" y="0" />
          > > <svg:text style=" font-size:10px" x="512" y="383">main</svg:text>
          > >
          > > <svg:g id="TreemapOutputSVG" >
          > > <svg:rect rx="5" ry="5" fill="#FFFF00" height="747" width="538"
          > > x="382" y="10" />
          > > <svg:text style=" font-size:10px" x="651"
          > > y="383">Treemap::Output::SVG</svg:text>
          > > <svg:g id="saveSVG" >
          > > <svg:rect rx="5" ry="5" fill="gray" height="68" width="518" x="392"
          > > y="660" />
          > > <svg:text style="font-size:10px" x="651" y="694">save SVG</svg:text>
          > > </svg:g>
          > > </svg:g>
          > >
          >
          >
        • DrTebi
          Hi, I am using jquery for the clock on this page: http://sonic.net/~drtebi/ I think the problem you have is that using a colon (:) within the jQuery selector
          Message 4 of 5 , May 22, 2009
            Hi,

            I am using jquery for the clock on this page:
            http://sonic.net/~drtebi/

            I think the problem you have is that using a colon (:) within the
            jQuery selector will usually trigger one of jQuery's special
            selectors, e.g. ':selected' -- but not the namespace you want. If you
            look at the source code of the clock example, you can see that I did
            not use svg:rect etc but just plain svg tags... I am not sure if
            that's the correct way, but it works in Firefox and other SVG
            supporting browsers...

            For your example, once you have changed the code to not use tags with
            namespaces, you should be able to use the selector $('#main rect') to
            get all rectangles.

            DrTebi



            On May 21, 2009, at 6:47 PM, Sentra Systems wrote:

            >
            >
            > Hi
            >
            > Does anyone have a working example of using jQuery selectors within
            > the
            > SVG DOM. The examples on http://keith-wood.name/svg.html show creating
            > new elements with the svg DOM but not querying.
            >
            > With the below SVG fragment, how would I get all the 'svg:rect'
            > elements
            > below the id 'main'?
            > I've tried $("#main > 'svg:rect') , but that returns nothing, though
            > $("#main") returns the group.
            >
            > Confusedly
            >
            > :)
            >
            > Dave
            >
            > <svg:g id="main" >
            > <svg:rect rx="5" ry="5" fill="antiquewhite" height="767"
            > width="1023" x="0" y="0" />
            > <svg:text style=" font-size:10px" x="512" y="383">main</svg:text>
            >
            > <svg:g id="TreemapOutputSVG" >
            > <svg:rect rx="5" ry="5" fill="#FFFF00" height="747" width="538"
            > x="382" y="10" />
            > <svg:text style=" font-size:10px" x="651"
            > y="383">Treemap::Output::SVG</svg:text>
            > <svg:g id="saveSVG" >
            > <svg:rect rx="5" ry="5" fill="gray" height="68" width="518" x="392"
            > y="660" />
            > <svg:text style="font-size:10px" x="651" y="694">save SVG</svg:text>
            > </svg:g>
            > </svg:g>
            >
            >
            >

            --
            We act as though comfort and luxury were the chief requirements of
            life, when all that we need to make us really happy is something to be
            enthusiastic about. - Charles Kingsley
          • Sentra Systems
            Thanks -- that helped sort things. I was trying to use the SVG plugin with jQuery 1.3.2 and it s not compatible (requires 1.2.6), so I was getting confused on
            Message 5 of 5 , Jun 3, 2009
              Thanks -- that helped sort things. I was trying to use the SVG plugin
              with jQuery 1.3.2 and it's not compatible (requires 1.2.6), so I was
              getting confused on multiple fronts as some features worked but not others.

              :)

              Dave

              DrTebi wrote:
              > Hi,
              >
              > I am using jquery for the clock on this page:
              > http://sonic.net/~drtebi/
              >
              > I think the problem you have is that using a colon (:) within the
              > jQuery selector will usually trigger one of jQuery's special
              > selectors, e.g. ':selected' -- but not the namespace you want. If you
              > look at the source code of the clock example, you can see that I did
              > not use svg:rect etc but just plain svg tags... I am not sure if
              > that's the correct way, but it works in Firefox and other SVG
              > supporting browsers...
              >
              > For your example, once you have changed the code to not use tags with
              > namespaces, you should be able to use the selector $('#main rect') to
              > get all rectangles.
              >
              > DrTebi
              >
              >
              >
              > On May 21, 2009, at 6:47 PM, Sentra Systems wrote:
              >
              >
              >> Hi
              >>
              >> Does anyone have a working example of using jQuery selectors within
              >> the
              >> SVG DOM. The examples on http://keith-wood.name/svg.html show creating
              >> new elements with the svg DOM but not querying.
              >>
              >> With the below SVG fragment, how would I get all the 'svg:rect'
              >> elements
              >> below the id 'main'?
              >> I've tried $("#main > 'svg:rect') , but that returns nothing, though
              >> $("#main") returns the group.
              >>
              >> Confusedly
              >>
              >> :)
              >>
              >> Dave
              >>
              >> <svg:g id="main" >
              >> <svg:rect rx="5" ry="5" fill="antiquewhite" height="767"
              >> width="1023" x="0" y="0" />
              >> <svg:text style=" font-size:10px" x="512" y="383">main</svg:text>
              >>
              >> <svg:g id="TreemapOutputSVG" >
              >> <svg:rect rx="5" ry="5" fill="#FFFF00" height="747" width="538"
              >> x="382" y="10" />
              >> <svg:text style=" font-size:10px" x="651"
              >> y="383">Treemap::Output::SVG</svg:text>
              >> <svg:g id="saveSVG" >
              >> <svg:rect rx="5" ry="5" fill="gray" height="68" width="518" x="392"
              >> y="660" />
              >> <svg:text style="font-size:10px" x="651" y="694">save SVG</svg:text>
              >> </svg:g>
              >> </svg:g>
              >>
              >>
              >>
              >>
              >
              > --
              > We act as though comfort and luxury were the chief requirements of
              > life, when all that we need to make us really happy is something to be
              > enthusiastic about. - Charles Kingsley
              >
              >
              >
              > ------------------------------------
              >
              > -----
              > To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
              > -or-
              > visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
              > ----Yahoo! Groups Links
              >
              >
              >
              >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.