Question

I am using jQuery 1.3.2, and I’m trying to select some elements in an svg DOM element.

$('svg > defs > lineargradient')

However for some reason it does not select it, I know that I can access other items in the <svg> element since I have successfully retrieved an $(“svg > rect”).

My SVG DOM looks like this:

<svg width="975" height="385">
    <defs>
       <lineargradient id="raphael-gradient-0" x1="1.000" y1="1.000" x2="0.000" y2="0.000">
          <stop offset="0%" stop-color="#242b62"/><stop offset="9.090909090909092%" stop-color="#174a88"/>
          <stop offset="18.181818181818183%" stop-color="#0e60a3"/><stop offset="27.272727272727273%" stop-color="#0b66ab"/>
          <stop offset="36.36363636363637%" stop-color="#0870b7"/>
       ...
       </lineargradient>
       <lineargradient id="raphael-gradient-1" x1="1.000" y1="1.000" x2="0.000" y2="0.000">...</lineargradient>

    </defs>
    <circle cx="50" cy="40" r="10" fill="#ff0000" stroke="#000" transform=""/>
    <rect x="0" y="0" width="975" height="385" fill="url(#raphael-gradient-1)" stroke="none" transform="" style="opacity: 1;" opacity="1" fill-opacity="1"/>
</svg>

Is there any reason why jQuery 1.3.2 wouldn’t be able to select the <lineargradient> elements?

Answer 1

alert($('svg lineargradient').length);

Working Demo

EDIT:

It appears that the > immediate child expression does not work, but if you specify a selector without this (if possible), it is fine in Firefox (but not IE). The following does work in IE however (tested in IE7)

alert($('lineargradient').length);

obviously, this will selecting the <lineargradient> elements that you want on a page slightly harder, but commands like slice() and eq() will allow you to get to them by position in the wrapped set.

Writing your own filters for the Sizzle selector engine may yield the results you want.