Question

我的目标是通过滚动鼠标滚轮来更改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>

问题1。我不太确定为什么需要在data:image/svg+xml;utf8,前面添加svgStr。如果不显示，则无法显示图片。

，我尝试找到此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内容。

谢谢。

Answer 1

Q1。我不太确定为什么需要添加数据：image / svg + xml; utf8

data的{{1}}属性必须是URL。字符串<object>不是URL。

使用<svg>...</svg>前缀将其转换为Data URL。 data:image/svg+xml;utf8,是MIME类型，它告诉浏览器此URL是SVG。 image/svg+xml部分告诉浏览器文本的编码方式。

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

utf8

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

您至少不能不使用数据URL。数据URL被视为位于其他域中。而且您无法获得跨域对象的var objUrl = 'data:image/svg+xml;utf8,'+ encodeURI( svgStr );。

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

”如果文档是从contentDocument URL生成的创建文档时分配的唯一不透明原点。”

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

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

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

1 个答案: