Javascript 嵌入/呈现问题异步加载服务器端生成的SVG

我试图重写一些JavaScript代码来优化现有的解决方案，但我无法访问原始源代码。它是一个基于Liferay的门户，带有一些呈现SVG图像的portlet。SVG用作图形导航元素，可用于向下钻取技术服务模型。由于SVG图像的实现方式，SVG图像的加载和刷新可能会很慢。SVG会消失几秒钟，因为刷新实际上会向Web服务器发出两个请求。首先，在服务器端重新生成完整的对象标记，并将其重新插入dom中。 第一个请求的响应如下所示：

<div><object type="image/svg+xml" data="generateSvg.svg” width="100" height="300" name="svgId"> <param name="wmode" value="transparent"></object></div>

indentifier.loadSvg = (function(){
    if(this.svgUrl){                        
        $.ajax({
            url: this.svgUrl,
            //enclose the right div in which the svg should be loaded as a context
            context: $('#_layout_WAR_Portlets_INSTANCE_' + this.portalId + '_plugin'),
            dataType: 'xml'
            }).done(function(svgDoc) {
                //construct an svg node and add it to the DOM
                var svgNode = $('svg', svgDoc);
                var docNode = document.adoptNode(svgNode[0]);
                $(docNode).attr('width', '100%').attr('height', '300');
                this.html(docNode);
            });

    }
});

var datasrc = "#";

// Create new object tag
var newobj = jQuery('<obj>', {
    id: 'newobject',
    data: datasrc,
    type: 'image/svg+xml'
});
    // Set parameters
    jQuery('<param />', {
        name: 'src',
        value: datasrc
    }).appendTo('#newobj');
    jQuery('<param />', {
        name: 'wmode',
        value: 'transparent'
    }).appendTo('#newobj');

// Dynamically load content and replace when done
newobj.load(datasrc,function(){
    $('#objectwrapper').empty();
    newobj.appendTo('#objectwrapper');
    alert("succes"); // Just to check if this works!
});

---

我不确定是否可以在对象标记中使用，但Iframe应该可以做到这一点。 您可以尝试使用javascript创建一个新的对象标记，加载svg并用新对象替换旧对象。 它看起来像这样：

<div><object type="image/svg+xml" data="generateSvg.svg” width="100" height="300" name="svgId"> <param name="wmode" value="transparent"></object></div>

indentifier.loadSvg = (function(){
    if(this.svgUrl){                        
        $.ajax({
            url: this.svgUrl,
            //enclose the right div in which the svg should be loaded as a context
            context: $('#_layout_WAR_Portlets_INSTANCE_' + this.portalId + '_plugin'),
            dataType: 'xml'
            }).done(function(svgDoc) {
                //construct an svg node and add it to the DOM
                var svgNode = $('svg', svgDoc);
                var docNode = document.adoptNode(svgNode[0]);
                $(docNode).attr('width', '100%').attr('height', '300');
                this.html(docNode);
            });

    }
});

var datasrc = "#";

// Create new object tag
var newobj = jQuery('<obj>', {
    id: 'newobject',
    data: datasrc,
    type: 'image/svg+xml'
});
    // Set parameters
    jQuery('<param />', {
        name: 'src',
        value: datasrc
    }).appendTo('#newobj');
    jQuery('<param />', {
        name: 'wmode',
        value: 'transparent'
    }).appendTo('#newobj');

// Dynamically load content and replace when done
newobj.load(datasrc,function(){
    $('#objectwrapper').empty();
    newobj.appendTo('#objectwrapper');
    alert("succes"); // Just to check if this works!
});

var datasrc=“#”；
//创建新的对象标记
var newobj=jQuery（“”{
id:'新对象'，
数据：datasrc，
键入：“image/svg+xml”
});
//设置参数
jQuery（“”{
名称：“src”，
值：datasrc
}).appendTo（“#newobj”）；
jQuery（“”{
名称：“wmode”，
值：“透明”
}).appendTo（“#newobj”）；
//动态加载内容并在完成时替换
load（datasrc，function（））{
$（'#objectwrapper'）.empty（）；
newobj.appendTo（“#objectwrapper”）；
警报（“成功”）；//只是为了检查这是否有效！
});

JSFiddle：

---

警报将触发两次，我相信这是一个JSFIDLE事件。

将数据属性添加到对象标记会重新引发刷新问题，但SVG显示正确。添加不带data属性的object标记会呈现SVG，但同样会出现呈现问题，如前所述，这表明我们刚刚向内联SVG元素添加了object标记。呈现问题仅发生在具有自定义绑定命名空间的SVG元素上，该命名空间用于根据元素名称或数据长度调整元素大小边界框内的子元素数。当异步添加内容时，元素会立即显示，而当通过具有数据属性的对象标记添加时，元素似乎会呈现（首先显示边界框，然后显示背景色）。