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

我使用嵌入到一个- <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');