JQuery & 操纵通过对象标签加载的 SVG？答案

【问题标题】：JQuery & manipulating SVG loaded via object tag?JQuery & 操纵通过对象标签加载的 SVG？
【发布时间】：2015-04-12 21:34:17
【问题描述】：

我已经通过一个对象块加载了一个 SVG 文档，我想以编程方式为每个组添加一个标题标签，但我被卡住了。 SVG 加载如下：

<object data="International_Telecommunication_Union_region.svg" type="image/svg+xml" id="worldMap">
</object>

然后我尝试获取组元素之一，如下所示（使用 JQuery 1.11.2）：

$('g .landxx .BR')

但这会返回一个空列表。但是，如果我执行以下操作，我会在 Chrome 的控制台中显示该元素：

console.log($('g .landxx .BR'))

任何人都可以建议将子元素添加到通过对象标签加载的 SVG 的正确方法。我宁愿拥有 JQuery 的便利，但如果这不是一个选项，我有兴趣了解替代方案。

顺便说一句，我确实看过 Raphael，但这似乎只允许操作通过 Raphael 创建的 SVG 对象，因此在这种情况下不是一个可行的选择。

【问题讨论】：

您确定调用 jQuery 代码时 SVG 已完全加载？
您可能使用了错误的文档，请参阅stackoverflow.com/questions/6316979/…（object 和 iframe 的行为应该非常相似）。无论如何，只需从 object 元素中获取 contentDocument 并使用它，这是一个示例 xn--dahlstrm-t4a.net/svg/html/…。
@arjabbar 一旦图像完全加载并且行为相同，我尝试从控制台执行相同的操作。
@ErikDahlström 我会再试一次，但我相信我已经尝试过了。
抱歉@Erik，当我发布答案时，我没有看到您已经提出了建议。

标签： javascript jquery svg

【解决方案1】：

只需使用 img 标签调整这个类似问题的答案：

How to change color of SVG image using CSS (jQuery SVG image replacement)?

将 src 属性更改为 data 并将 class="svg" 添加到您的对象标签。我对其进行了测试，我能够使用 css 更改填充和笔触，使用 jquery 应该也可以正常工作。

jQuery('object#worldMap').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('data');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');
    });

【讨论】：