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

Question

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

1. 生成

   <object id={"std-chart"}
class="mouse-wheel-pannable"
type="image/svg+xml"
/>


2. 获取数据时svgStr来自 websocket，动态地将其放入 <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>

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

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

   
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 内容。

谢谢。

Answer 1

Q1. I am not quite sure why I need to add data:image/svg+xml;utf8

data <object> 的属性必须是一个 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 );

Question. How can I get a valid contentDocument. i.e. element, so that I can change the viewBox?

至少对于数据 URL 不能。数据 URL 被视为在不同的域中。而且你无法获得 contentDocument用于跨域对象。

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

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

Then I think the question is that how to dynamically let to "reload" the svg content.

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