Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/427.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/77.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript JQuery&;操作通过对象标记加载的SVG?_Javascript_Jquery_Svg - Fatal编程技术网

Javascript JQuery&;操作通过对象标记加载的SVG?

Javascript JQuery&;操作通过对象标记加载的SVG?,javascript,jquery,svg,Javascript,Jquery,Svg,我已经通过一个对象块加载了一个SVG文档,我想通过编程方式为每个组添加一个标题标记,但是我被卡住了。SVG的加载方式如下: <object data="International_Telecommunication_Union_region.svg" type="image/svg+xml" id="worldMap"> </object> 但这将返回一个空列表。但是,如果我执行以下操作,我会在Chrome的控制台中显示元素: console.log($('g .lan

我已经通过一个对象块加载了一个SVG文档,我想通过编程方式为每个组添加一个标题标记,但是我被卡住了。SVG的加载方式如下:

<object data="International_Telecommunication_Union_region.svg" type="image/svg+xml" id="worldMap">
</object>
但这将返回一个空列表。但是,如果我执行以下操作,我会在Chrome的控制台中显示元素:

console.log($('g .landxx .BR'))
任何人都可以建议将子元素添加到通过object标记加载的SVG中的正确方法吗。我宁愿使用JQuery,但是如果这里没有这个选项,我很想听听其他的选择


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

只需使用img标记调整对类似问题的答案:

将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');
    });

您确定调用jQuery代码时SVG已完全加载吗?您可能使用了错误的文档,请参阅(object和iframe的行为应该非常相似)。无论如何,只要从
对象
元素抓取
内容文档
,然后使用它,下面是一个例子。@arjabbar我会在控制台尝试同样的操作,一旦图像完全加载并且行为相同。@ErikDahlström我会再试一次,但我相信我已经试过了。对不起@Erik当我发布答案时,我没有看到你已经提出了。
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');
    });