如何在 SVGweb 中使用 jQuery 选择器

Posted 2023-05-09

【中文标题】如何在 SVGweb 中使用 jQuery 选择器

【英文标题】：How to use jQuery selectors with SVGweb

【发布时间】：2011-12-26 07:07:56

【问题描述】：

我想在 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 */

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

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

注意：如果这是不可能的，一个简短的解释（也许是针对此限制的某种解决方法）可能会获得复选标记。

【参考方案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');

【讨论】：

是的，这适用于类型选择器，这很好 - 但它仍然不适用于像 $('.class') 这样的类选择器，是吗？

我认为它应该 -- $svg.find('.classname') 应该给你任何带有class="classname" 的元素。