Jquery选择<object>标记内的SVG元素

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中选择 <object> 标签内的 SVG 元素，可以通过多种方式实现。

基础概念

jQuery: 一个 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax。
SVG: 可缩放矢量图形，是一种基于 XML 的图像格式，用于描述二维矢量图形。
<object> 标签: HTML 中用于嵌入外部资源的标签，可以用来嵌入 SVG 文件。

类型与应用场景

类型: 可以选择不同类型的 SVG 元素，如 <circle>, <rect>, <path> 等。
应用场景: 在网页设计、交互式图表、动画效果等方面广泛应用。

如何选择 `<object>` 标签内的 SVG 元素

假设我们有以下 HTML 结构：

<object id="svgObject" data="path/to/your.svg" type="image/svg+xml"></object>

方法一：使用 jQuery 的 `contents()` 方法

$(document).ready(function() {
    var svgDocument = $('#svgObject')[0].contentDocument;
    var svgElement = $(svgDocument).find('svg');
    // 现在你可以对 svgElement 进行操作
});

方法二：使用 `getSVGDocument()` 方法

$(document).ready(function() {
    var svgObject = document.getElementById('svgObject');
    svgObject.addEventListener('load', function() {
        var svgDocument = svgObject.getSVGDocument();
        var svgElement = $(svgDocument).find('svg');
        // 现在你可以对 svgElement 进行操作
    });
});

遇到的问题及解决方法

问题: 无法获取到 <object> 内的 SVG 元素。

原因: 可能是因为 <object> 标签的 load 事件尚未触发，或者 SVG 文件加载失败。

解决方法:

确保 SVG 文件路径正确且可访问。
使用 load 事件监听 <object> 标签的加载完成。
检查浏览器控制台是否有错误信息。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery SVG Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <object id="svgObject" data="path/to/your.svg" type="image/svg+xml"></object>
    <script>
        $(document).ready(function() {
            $('#svgObject').on('load', function() {
                var svgDocument = this.contentDocument;
                var svgElement = $(svgDocument).find('svg');
                // 示例：改变 SVG 内某个元素的填充颜色
                svgElement.find('#someSvgElementId').css('fill', 'red');
            }).each(function() {
                if(this.complete) $(this).load();
            });
        });
    </script>
</body>
</html>

在这个示例中，我们监听了 <object> 标签的 load 事件，并在加载完成后获取 SVG 文档，然后对 SVG 元素进行操作。这样可以确保在 SVG 文件完全加载后再进行 DOM 操作，避免因加载未完成而导致的错误。

Jquery选择<object>标记内的SVG元素

、、、

我有一个SVG，其中有一些linearGradient元素，在按钮上的变化，每件事都很好，因为你可以see here。我的问题是，如果我的示例中的svg是一个外部文件，并且是在<object>标记中调用的，如何做同样的事情？我的SVG： <object data="Img/PumpStation/P

浏览 28提问于2019-12-12得票数 1

回答已采纳

1回答

JQuery &操纵通过object标签加载的SVG？

、、

我已经通过对象块加载了一个SVG文档，并且我想以编程方式为每个组添加一个title标记，但我被卡住了。worldMap">然后，我尝试获取其中一个组元素，如下所示(使用JQuery 1.11.2)：但这将返回一个空列表。然而，如果我执行以下操作，我会在Chrome的控制台中显示元素： console.log($('g .landxx .BR&

浏览 5提问于2015-04-13得票数 2

1回答

jQuery在<object>标记中选择SVG锚元素

、、、、

我在使用内置到SVG中的锚元素(显示为<object>)时遇到了很大的困难。我试图用jQuery锁定对象中的锚元素，以在单击时切换其各自的内容。如果你看看我的例子，我有3个链接内置在我的SVG (他们是一个较轻的绿色比其他)。我使用InkScape创建我的SVG映像，在被链接的浅绿色区域上，只有与h

浏览 1提问于2020-10-20得票数 1

回答已采纳

2回答

SVG <script>元素:内部还是外部？

、、

我看到可以在svg tag ()中使用<script>标签。此外，svg标记中的元素可以通过标记外部的JavaScript进行访问，因为它们是DOM的一部分。我找不到更多关于哪个更好的细节。通常，我将所有JS代码放在单独的文件中，并在html中包含引用。我也可以对针对svg元素的脚本执行相同的操作吗？另外，我读到我还可以在sv

浏览 4提问于2011-05-03得票数 12

回答已采纳

1回答

jquery与svg路径交互以创建特定的可点击区域

、

我正在尝试让svg路径在被放入文件而不是文档的行内时是“可点击的”。基本上，我只希望能够单击图像的填充元素，而不是任何空白区域。我能够访问svg文件内部元素的唯一方法是在jquery.svg中使用以下方法： (document).ready(function() { { onLoadModify a svg fil

浏览 36提问于2020-08-21得票数 0

2回答

JQuery Draggable和带有SVG的<object>？

、、、

我有一个显示在表格单元格中的object标记内的SVG文件，我想使用JQuery的Draggable使SVG在表格单元格内可拖动。代码--减去标记中令人困惑的部分，如下所示：<div id="box"> <table align="center"

浏览 0提问于2010-08-08得票数 6

回答已采纳

2回答

将目标添加到SVG标签

、、

我正在尝试将target="_blank"添加到我的SVG <a/>标记中，但是我不明白为什么我的代码不能工作。<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> function loadedSVG(){ $('#<e

浏览 22提问于2020-12-10得票数 1

1回答

使用jquery的命名空间选择器在1.7.2版之后更新jquery后不可能

、、、

我尝试使用jquery选择命名空间元素，如下所示：var $elements = $('a[xlink\\|href]', $svg); // Selectonly a xlink attributes inside svg object var $allelements = $('a[*|href]', $svg</e

浏览 0提问于2016-06-16得票数 1

2回答

使用溢出:隐藏在<object>标记中无法在9和更高版本中工作

、、、、

，我有这个我试过的：<object data="file.svg" style="overflow:hidden"></object> <style>object{overflow:hidden}</st

浏览 0提问于2015-08-05得票数 1

回答已采纳

3回答

如何使用Javascript访问SVG元素

、、

我正在摆弄SVG，我希望我可以在Illustrator中创建SVG文件，并使用Javascript访问元素。这里的SVG文件Illustrator踢出(它似乎也添加了大量的垃圾到开始的文件，我已经删除)<!> 正如您可能看到的，每个元素都有一个ID，我希望能够使用Javascript访问各个<

浏览 68提问于2010-05-02得票数 90

回答已采纳

2回答

svg元素的边框

、、

我正在使用svg和它的dom操作。我想为位于<g>标记内的一组svg元素创建一个边框。我该怎么做呢？是否也可以创建圆形/椭圆边界？我使用的是jQuery SVG库。

浏览 0提问于2012-03-24得票数 2

回答已采纳

3回答

jQuery中的contentDocument

、、

我有以下js脚本来访问对象中的元素(SVG - <object data="bbbbbb.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object> ) jQuery(document).ready(function(

浏览 3提问于2011-05-13得票数 7

1回答

单击SVG图像(JS)

、、

我的html页面上有一些SVG图像。我想得到每一张图片的id点击它。HTML：<div cla

浏览 3提问于2020-02-06得票数 0

回答已采纳

2回答

如何在HTML中绘制SVG

、、

日安，背景:我使用snap.svg加载SVG。我想要替换的节点在一个组节点内。我在google chrome中打开了开发者工具

浏览 0提问于2014-01-27得票数 1

2回答

我需要在我的html文档中包含一张SVG图像(一张地图)，希望我可以使用JQuery来操作它。我在互联网上查了一下，有人说你不能直接操作SVG。有些人建议使用Keith Wood的JQuery SVG插件，但我打不开那个。这里有一个示例，说明您可以将SVG代码直接包含到html5中。首先，我的SVG代码有点长，所以如果我把代码放在那里会看起来很糟糕，其次，即使我这样做了，我仍然不确定如何操作它。所以我想也许我可以使用

浏览 0提问于2012-07-27得票数 2

回答已采纳

3回答

如何为NVD3.js图添加标题

、

我想在NVD3.js中的图形上添加一个标题文本。

浏览 3提问于2013-05-09得票数 7

回答已采纳

3回答

Mozilla没有在addEventListener中加载SVG对象(“加载”)

、、、、

我有加载svg文件的object html标记。文件包含.s0类。当您单击该类时，我想处理事件。代码

浏览 2提问于2015-09-14得票数 11

回答已采纳

2回答

如何在SVG* (可伸缩矢量图形)中使用jquery？*

、

我已经将SVG嵌入到我的php文件中以显示地图。我想在上面使用jquery，但是我不知道如何将jquery链接到其中。我希望有人已经做过这样的事。所以请在这个问题上提供帮助。谢谢我在我的问题上找到了一些有用的信息。不过，我仍然需要知道如何添加一些css或链接加载事件。

浏览 4提问于2011-07-22得票数 29

回答已采纳

1回答

在<object>标记中选择SVG组的元素

、、

我有一个SVG外部文件，它在<object>标记中被调用。<object data="Img/PumpStation/Interfata.svg" type="image/svg+xml" id="p1"></object> SVG包含两个组。class="startP btn btn-light"

浏览 2提问于2019-12-19得票数 0

1回答

是否使用jQuery选择SVG宽度？

、、

我需要能够使用jQuery在embed元素中选择svg元素的宽度和高度。注意，它必须在embed元素内，如果这对答案很重要的话。我试过这个测试，但它返回undefinedalert(width);一些谷歌搜索似乎表明，用这种方式选择</

浏览 1提问于2011-12-09得票数 3

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Jquery选择<object>标记内的SVG元素

基础概念

相关优势

类型与应用场景

如何选择 <object> 标签内的 SVG 元素

方法一：使用 jQuery 的 contents() 方法

方法二：使用 getSVGDocument() 方法

遇到的问题及解决方法

示例代码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

如何选择 `<object>` 标签内的 SVG 元素

方法一：使用 jQuery 的 `contents()` 方法

方法二：使用 `getSVGDocument()` 方法