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

【问题标题】：why my object contentDocument returns null?为什么我的对象 contentDocument 返回 null？
【发布时间】：2019-01-19 04:17:23
【问题描述】：

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

生成

<object id={"std-chart"} class="mouse-wheel-pannable" type="image/svg+xml" />
当从 websocket 获取数据 svgStr 时，将其动态放入 <object> 元素中。

let obj = document.getElementById('std-chart'); var objUrl = 'data: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>

第一季度。我不太清楚为什么需要在svgStr 前面添加data:image/svg+xml;utf8,。否则，图片将无法显示。

在我的 mouseWheelScroll() 函数中，我尝试找到这个 svg 元素并更改它的 viewBox。但是我找不到 svg 元素，因为 contentDocument 返回 null。

var svgObjs = document.getElementsByClassName("mouse-wheel-pannable"); var svgObj = svgObjs[0].contentDocument; //svgObj returns null var svg = svgObj.getElementsByTagName('svg')[0]; //error here svg.setAttributeNS(null, 'viewBox', someNewViewBox);

问题。如何获得有效的 contentDocument。即<svg>元素，这样我就可以改变viewBox？

谢谢。

我尝试使用<embed> 而不是<object>，从Chrome 控制台我看到了嵌入项，但是仍然如何获得下面的<svg>？下图中的<svg> 还有效吗？ Please click here to see the chrome console for it.

谢谢。

做了更多的测试。如果我在第一个开头设置<object data=xxxxxx.svg/>，即如果我将svg 内容存储在一个文件中并在初始化<object> 时加载，则一切正常。然后我认为问题是如何动态地让<object>“重新加载”svg 内容。

谢谢。

【问题讨论】：

标签： javascript svg

【解决方案1】：

第一季度。我不太清楚为什么需要添加数据：image/svg+xml;utf8

<object> 的 data 属性必须是 URL。字符串 <svg>...</svg> 不是 URL。

使用data:image/svg+xml;utf8, 为其前缀会将其变为Data URL。 image/svg+xml 是告诉浏览器这个 URL 是 SVG 的 MIME 类型。 utf8 部分告诉浏览器文本是如何编码的。

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

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

问题。如何获得有效的 contentDocument。即元素，以便我可以更改viewBox？

至少对于数据 URL，您不能这样做。数据 URL 被视为位于不同的域中。并且您无法为跨域对象获取 contentDocument。

https://html.spec.whatwg.org/#origin:document-4

"如果文档是从data: URL 生成的创建文档时分配的唯一不透明来源。”

然后我认为问题是如何动态地让“重新加载” svg 内容。

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

【讨论】：