javascript - 如何在 two.js 中解释外部 svg 文件

Question

有什么方法可以在 two.js 中解释带有 object 标签的外部 svg 文件吗？我尝试了下面的方式但是..

HTML

<object type="image/svg+xml" data="./svg/mydrawing.svg" id="mysvg"></object>

JS

var mySvg = document.getElementById("mysvg").contentDocument;
var shape = two.interpret(mySvg);
console.log(shape);

//in console:
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

如果我可以导入外部 .svg 文件，那就太好了，因为我的 svg 文件太大而无法以 HTML 格式写入内联 SVG。

提前致谢。

Answer 1

可能是您需要在 contentDocument 中选择 svg 标签。例如：

var svgObject = document.getElementsByTagName('object')[0];
svgObject.onload = function(){
      var mySvg = svgObject.contentDocument.getElementsByTagName('svg')[0];
      var two = new Two();
      var shape = two.interpret(mySvg);
      console.log(shape);
};