jQuery Selector + SVG 不兼容？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，jQuery 是一个广泛使用的 JavaScript 库。然而，有时候会遇到 jQuery 选择器与 SVG 图形不兼容的问题。本文将深入探讨这个问题，并提供解决方案。

问题描述

当使用 jQuery 的选择器（如 $('selector')）来选取 SVG 元素时，有时候会返回空集合（即没有匹配的元素）。这意味着我们无法通过 jQuery 来操作选定的元素。

例如，假设我们有一段 SVG 代码如下所示：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

我们可以通过以下代码来获取圆形元素并更改其填充颜色：

$('circle').css('fill', 'blue');

然而，如果我们将圆形元素包含在 <defs> 或 <use> 元素中，则上述代码将无法正常工作。例如：

<svg width="100" height="100">
  <defs>
    <circle id="mycircle" cx="50" cy="50" r="40" fill="red" />
  </defs>
  <use href="#mycircle" />
</svg>

此时，使用相同的 jQuery 代码将无法更新圆形元素的填充颜色。这是一个令人困惑并且需要注意的问题。

这个问题的根本原因在于 jQuery 的选择器是基于 CSS 选择器实现的，而 SVG 是一种独立的 XML 语言。尽管 SVG 元素具有类似 HTML 元素的外观和属性，但它们实际上是 XML 标签，它们的结构和属性与 HTML 元素不同。

因此，当使用 jQuery 的选择器来选取 SVG 元素时，它将默认在文档根元素（即 <html> 元素）下查找匹配的元素，而不是在 SVG 元素内部进行搜索。这就导致了无法正确识别包含在 <defs> 或 <use> 元素中的 SVG 元素。

为了解决这个问题，我们可以使用 querySelector 方法代替 jQuery 的选择器。querySelector 是浏览器原生提供的方法，可以通过 CSS 选择器在任何 DOM 元素内搜索匹配的子元素。使用它可以确保搜索仅在 SVG 元素内部进行，从而使得匹配更加准确。

例如，我们可以使用以下代码获取圆形元素并更改其填充颜色：

document.querySelector('circle').setAttribute('fill', 'blue');

如果要选择包含在 <defs> 或 <use> 元素中的 SVG 元素，可以使用 getElementById 方法获取对该元素的引用，然后使用 .contentDocument 属性来访问内部文档并继续搜索：

var svgDoc = document.querySelector('svg').contentDocument;
var circle = svgDoc.getElementById('mycircle');
circle.setAttribute('fill', 'blue');

在本文中，我们深入探讨了 jQuery 选择器与 SVG 图形不兼容的问题，并提供了解决方案。要避免这个问题，建议在处理 SVG 元素时优先考虑使用原生 JavaScript 方法而不是 jQuery。这可以确保更高的准确性和可靠性，并使您的代码更易于理解和维护。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/27676