如果文件命名为*.html,则以下代码可以工作(在控制台中,您可以看到两个日志消息作为检测到的元素),但如果我命名为*.xhtml,则不会选择元素.为什么这些表现不一样？只有当类名包含在选择器中时才会出现问题,因此$("#cvs rect")在两种情况下均可使用,
<?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>
这看起来是jQuery或Sizzle中的一个bug.这是一个显示问题的简化测试用例:
<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>
Chrome v11,Firefox v4,Safari v5和IE9的结果保持一致.
问题似乎是jQuery没有正确查询class另一个名称空间中的元素的属性.使用"attribute contains word"选择器,~=您可以使用jQuery查找这些元素.
编辑:这个问题的根本原因可能记录在这个答案中 ; 总结,问题是,SVG DOM指定的class属性(如与许多其他)不是通过访问一个静态值className,而是一个SVGAnimatedString具有.baseVal和.animVal需要的属性来获取类的实际字符串值.
| 归档时间： |
|
| 查看次数： |
2970 次 |
| 最近记录： |