Javascript 为什么我的对象contentDocument返回null？

我的目标是通过滚动鼠标滚轮来更改SVG中的viewBox属性，该属性通过websocket从API服务器检索。我的做法如下：

产生

从websocket获取数据

svgStr

时，动态地将其放入

元素中

设obj=document.getElementById（'std-chart'）；
var objUrl='数据：image/svg+xml；utf8，'+svgStr；
obj.setAttributeNS（null，'data'，objUrl）；

其中

svgStr

类似于：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1081" height="184" viewBox="0 0 1081 184"  > 
<path d="M 0.0 98.7 L 0.3 98.7 .../> 
</svg>

问题1。我不太清楚为什么需要添加数据：image/svg+xml；utf8

的
数据
属性必须是URL。字符串
…
不是URL

使用
数据作为前缀：image/svg+xml；utf8，
将其转换为一个。
image/svg+xml
是MIME类型，它告诉浏览器此URL是svg。
utf8
部分告诉浏览器文本是如何编码的

顺便说一句，数据URL具有与其他URL相同的规则。SVG可以包含URL中非法的字符。因此，在创建数据URL时，应该对SVG进行URL编码

var objUrl = 'data:image/svg+xml;utf8,'+ encodeURI( svgStr );

问题。如何获取有效的contentDocument。i、 元素，以便我可以更改viewBox

至少对于数据URL，您不能不使用。数据URL被视为位于不同的域上。您无法获取跨域对象的
contentDocument


“如果文档是从
数据生成的：
URL
创建文档时指定的唯一不透明原点。“

然后我认为问题在于如何动态地让用户“重新加载”svg内容

为什么需要使用
？为什么不直接将SVG插入页面