jQuery class selector for SVG in XHTML

Question

The following code works (in console you can see two log messages as the elements detected) if the file is named as *.html, but the elements are not selected if I name to *.xhtml. Why do these behave differently? The issue is only when the class name is included in the selector, so $("#cvs rect") works in both case,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
<title>Test</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head><body>
  <svg id="cvs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100" version="1.1" baseProfile="full">
    <rect class="drag resize" x="50" y="30" width="50" height="30" />
    <rect class="drag resize" x="5"  y="5"  width="90" height="50" />
  </svg>
  <script>
    $(document).ready(function() {  
      $("#cvs rect.resize").each(function() {
        console.log("selected");
      }); 
    }); 
  </script>
</body></html>

Try to use my jQuery hack [http://stackoverflow.com/questions/11792754/create-and-access-svg-tag-with-jquery/14985470#14985470][1] [1]: http://stackoverflow.com/questions/11792754/create-and-access-svg-tag-with-jquery/14985470#14985470 — Ruben Kazumov, Feb 20 '13 at 21:28

score 7 · Accepted Answer · edited May 23 '17 at 12:15

This looks to be a ~bug in jQuery or Sizzle. Here's a pared-down test case showing the problem:

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
  <title>Create SVG Elements HTML</title> 
</head><body> 
  <svg xmlns="http://www.w3.org/2000/svg"> 
    <circle r="200" class="face" fill="red" /> 
  </svg> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript"><![CDATA[
    console.log( document.getElementsByClassName('face').length );    // 1
    console.log( document.querySelectorAll('circle.face').length );   // 1
    console.log( $('circle').length );                                // 1
    console.log( $('.face').length );                                 // 0
    console.log( $('circle.face').length );                           // 0
    console.log( $('circle[class~="face"]').length );                 // 1
  ]]></script> 
</body></html>

Results are consistent across Chrome v11, Firefox v4, Safari v5, and IE9.

The problem appears to be that jQuery is not properly querying class attributes on elements within another namespace. Using the "attribute contains word" selector ~= you can use jQuery to find these elements.

Edit: The root cause of this is likely documented in this answer; summarized, the problem is that SVG DOM specifies that the class attribute (as with many other) is not a static value accessible via className, but rather an SVGAnimatedString which has .baseVal and .animVal properties needed to fetch the actual string value of the class.

thank you, I will report to the jQuery mailing list.. thanks again for the effort.. — bsr, May 03 '11 at 20:16
@bsreekanth See my updated answer for a workaround query that works. — Phrogz, May 03 '11 at 20:18

score 0 · Answer 2 · answered Jul 13 '11 at 18:19

0

<rect>

elements are not self-closing, these lines need closing:-

 <rect> </rect>

answered Jul 13 '11 at 18:19

QuentinUK

2,997
21
20

score -1 · Answer 3 · answered May 03 '11 at 18:17

-1

I don't think *.xhtml is a valid extension; XHTML is usually used within a standard .htm or .html file anyway, just specify it in your doctype.

http://www.webheadstart.org/xhtml/faq/index.html

answered May 03 '11 at 18:17

jszpila

676
9
24

well I saw here, i could use that extension as well. http://en.wikibooks.org/wiki/XHTML/A_Basic_XHTML_Document#File_Extension .. not sure what is reliable.. anyway, will wait for more opinion.. thanks for the help – bsr May 03 '11 at 18:23
1

`.xhtml` is **the** extension for XHTML documents. Servers that understand `.xhtml` files will serve them as `application/xhtml+xml`, browsers will also try to validate them before displaying. When XHTML lives in an `.html` or `.htm` file, it's usually served as `text/html`, which we've been doing for years without realizing it's a mistake. – BoltClock May 03 '11 at 18:29

jQuery class selector for SVG in XHTML

3 Answers3