我有一个存储在 s3 上的 svg 图像。我使用 object 标签将它嵌入到网页中，就像这样。
<object
type="image/svg+xml"
data="https://bucket.actual_url_to_amazon_s3_bucket"
id="graph-svg"></object>
到目前为止，一切都很好，很简单。现在有时用户会进行更改，我想向他们展示不同的 svg。我只想更新对象标签的来源，就像我可以使用 img 标签一样。
虽然这在技术上可行，并且加载了新的 svg，但我遇到了奇怪的渲染问题——svg 的大小完全错误并被 chop 了。我发现，如果我从 DOM 中删除对象标签，然后更新数据，然后将其添加回 DOM，它就可以正常呈现。
html:
<div id="svgcont">
<object
type="image/svg+xml"
data="https://bucket.actual_url_to_amazon_s3_bucket.svg"
id="graph-svg"></object>
</div>
js:
// make an api call to get the new svg url and then:
var ob = $("#graph-svg").remove();
ob.attr("data", newSVGurl);
$("#svgcont").prepend(ob);
如果我执行上述操作，我会根据需要显示 svg。而是直接调用
ob.attr("data", newSVGurl)
有没有一种方法可以直接告诉对象“刷新您的源数据”，或者强制它重新渲染或在它插入 DOM 时执行的任何操作，而无需实际删除它然后重新插入它？
删除的问题是它看起来很奇怪而且跳动，它使图像闪烁和页面上的其他项目跳动了一下。所以我希望能有一些看起来更流畅、更不像故障的东西。
最佳答案
我已经详细研究了您的问题，似乎很难(也许不可能)比我用下面的代码提出的更好。
我的解决方案在包装 div 上设置宽度和高度，该宽度和高度等于被替换对象的宽度和高度。然后它会替换对象并再次删除宽度和高度。这可以防止文本在交换对象时折叠和展开。
不幸的是，图像本身仍然有些闪烁。我没能解决这个问题。在 JavaScript 中创建对象而不将其附加到文档不会触发图像加载。将它附加到一个不可见的 div 并等待加载事件，然后将它移动到目标 div 可行，但仍然有我试图防止的闪烁。
无论如何，这是代码。哦，这是一个 Pen使用相同的代码。 点击“替换 SVG!”
urls = [
"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"
];
index = 0;
let doTheBusiness = () => {
index = index + 1 > urls.length - 1 ? 0 : index + 1;
let url = urls[index];
let invisibleDiv = document.getElementById("my-invisible-div");
let newObject = document.createElement("object");
newObject.setAttribute("type", "image/svg+xml");
newObject.setAttribute("data", urls[index]);
let oldObject = document.querySelector("#my-wrapper object");
let bBox = oldObject.getBoundingClientRect();
let w = bBox.width;
let h = bBox.height;
let 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 {
width: 500px;
margin-left: auto;
margin-right: auto;
}
#my-invisible-div {
position: absolute;
right: -10000px;
top: -10000px;
}
#my-wrapper {
padding: 0px;
}
object {
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<button onclick="doTheBusiness()">Replace SVG!</button>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div id="my-wrapper">
<object type="image/svg+xml" data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/debian.svg"></object>
</div>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div id="my-invisible-div">
</div>
</body>
</html>关于javascript - 如何更新嵌入的 svg 元素的源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55175178/