Question

Google Chrome v60.0.3112.101，HTML5，jQuery 3.2.1

我的object元素与svg - 文件相关联。在我的html页面上显示此svg没有问题。我尝试用jQuery获取svg元素，但它没有找到我的两个尝试：

$('object').length; // 1
$('svg').length; // 0
$('object > svg').length; // 0

这是我的html块：

<object type='text/svg+xml' data='svg/logo.svg'></object>

如何使用jQuery获取svg？

P.S。我使用此方法（外部svg - 文件），因为我的svg将在许多网页上使用。另外，我使用object代替img，因为svg使用外部css - 文件。

Answer 1

您需要使用<object>元素的<svg>属性。那将为您提供作为documentElement元素的父文档的文档对象。然后，您可以使用文档对象的<svg>属性来获取文档的根元素，该元素将是var svg = $("object")[0].contentDocument.documentElement;元素。

#document
   <html>            (HTMLDocument)
      <object>       (HTMLObjectElement)   $("object")[0]
         #document   (HTMLDocument)        .contentDocument
            <svg>    (SVGSVGElement)       .documentElement

想象一下：

onload

但请记住，在页面加载完成之前，SVG无法访问。所以你需要等待Window $(window).on("load", function() { var svg = $("object")[0].contentDocument.documentElement; console.log("svg = ",svg); });事件。

{{1}}

Answer 2

如果添加ID，则可以访问该对象

<object id="svg" type='text/svg+xml' data='svg/logo.svg'></object>

然后您可以像这样查询ID

$('#svg')

如何通过对象附加svg？

2 个答案: