如何在SVGweb中使用jQuery选择器

Question

我想在SVG上使用jQuery选择器。在具有本地SVG支持的浏览器上，所有选择器都可以正常工作。但在浏览器上(实际上，我只测试了ie8)，SVGweb使用的是Flash渲染器，只有一些选择器可以工作，例如：

$('#id')             /* id selectors works*/
$('#id #another-id') 
$('*')                /* universal selector works */  

一些选择器将不起作用：

$('path')            /* type selectors don't work */
$('.region')         /* class selectors don't work */

注意:我还没有测试其他选择器。

我的问题是:如何让它们工作？

注意:如果这是不可能的，一个简短的解释(也许是这个限制的某种变通方法)可以获得复选标记。

Answer 1

(使用Firefox)

我使用embed-in-an-<object>方法来实现跨浏览器兼容性：

<!--[if !IE]>-->
  <object data="path-to.svg" type="image/svg+xml" id="object-id">
  </object>
<!--<![endif]-->
<!--[if lt IE 9]>
  <object src="path-to.svg" classid="image/svg+xml" id="object-id">
  </object>
<![endif]-->
<!--[if gte IE 9]>
  <object data="path-to.svg" type="image/svg+xml" id="object-id">
  </object>
<![endif]-->

...then使用<object>节点的contentDocument告诉jQuery()这个新的DOM...

var svgdoc = $('object-id').get(0).contentDocument;
var $svg = $(svgdoc).children();

...and你应该能够从$svg中学到东西

var $paths = $('path',$svg);
$svg.find('rect').attr('fill','blue');