Javascript 如何更新嵌入式svg元素的源代码

我在s3上存储了一个svg图像。我使用

object

标记将其嵌入到网页中，如下所示

 <object
    type="image/svg+xml"
    data="https://bucket.actual_url_to_amazon_s3_bucket"
    id="graph-svg"></object>

js:

如果我执行上述操作，我将按自己喜欢的方式显示svg。但是直接打电话

ob.attr("data", newSVGurl)

有没有一种方法可以直接告诉对象“刷新源数据”，或者强制它重新渲染，或者在插入DOM时执行任何操作，而不实际删除它，然后重新插入它

---

删除的问题是它看起来很奇怪，而且会让页面上的图像和其他项目有点跳跃。因此，我希望有一个看起来更平滑、更不像小故障的问题。

我已经详细地研究了您的问题，似乎很难（也许不可能）比下面的代码做得更好

我的解决方案在环绕div上设置的宽度和高度等于要替换的对象的宽度和高度。然后替换对象并再次删除宽度和高度。这样可以防止在交换对象时文本折叠和展开

不幸的是，图像本身仍然有些闪烁。我还没能解决这个问题。在JavaScript中创建对象而不将其附加到文档不会触发图像加载。将它附加到一个不可见的div并等待load事件，然后将其移动到目标div可以工作，但仍然有我试图阻止的闪烁

不管怎样，这是代码。哦，这里有一个代码相同的。 单击“替换SVG！”

url=[
"https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/debian.svg",
"https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ubuntu.svg",
"https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/jquery.svg",
"https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/json.svg"
];
指数=0；
让我们做生意=（）=>{
index=index+1>url.length-1？0:index+1；
让url=url[索引]；
让invisibleDiv=document.getElementById（“我的不可见div”）；
让newObject=document.createElement（“对象”）；
setAttribute（“type”、“image/svg+xml”）；
setAttribute（“数据”，URL[index]）；
让oldObject=document.querySelector（“我的包装器对象”）；
设bBox=oldObject.getBoundingClientRect（）；
设w=bBox.width；
设h=bBox.height；
让parent=oldObject.parentNode；
parent.style.width=`${w}px`；
parent.style.height=`${h}px`；
//parent.removeChild（oldObject）；
parent.replaceChild（newObject、oldObject）；
newObject.onload=（）=>{
parent.style.width=null；
parent.style.height=null；
newObject.onload=null；
};
};
.container{
宽度：500px；
左边距：自动；
右边距：自动；
}
#我的隐形潜水艇{
位置：绝对位置；
右：-10000px；
顶部：-10000px；
}
#我的包装纸{
填充：0px；
}
反对{
宽度：100%；
}

文件
替换SVG！
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。


读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它或多或少具有字母的正态分布，而不是使用“此处的内容，
内容在这里，使它看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。各种各样的
版本经过多年的演变，有时是偶然的，有时是有意的（注入幽默等）。

您可以尝试在后台加载新对象，然后替换它。任何替换都会让人感到不安，最好添加一个动画使其看起来平滑。您能提供一些测试数据，如两个SVG及其在codepen或JSBin中的尺寸吗？这很有帮助，谢谢！我做了一些改进--我发现不需要在dom中创建新对象，实际上可以用原始对象替换Node，这会导致浏览器重新加载数据。使用boundingClientRect（）获取尺寸，然后将父尺寸设置为++。
// make an api call to get the new svg url and then:
var ob = $("#graph-svg").remove();
ob.attr("data", newSVGurl); 
$("#svgcont").prepend(ob);

ob.attr("data", newSVGurl)