如何在 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

（使用火狐）

我正在使用 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]-->

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

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

...你应该能够基于$svg：

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