如果 object 标记不是很合适,那么是否有更可取的方法来获取 SVG 文件并直接使用 two.js 对其进行操作?还是我必须进入 SVG 并内联添加它们?
使用这个问题的代码和我自己的一些编辑,我无法让我的对象旋转,Chrome 给了我错误: Uncaught TypeError: Cannot read property 'x' of undefined
HTML
<object type="image/svg+xml" data="./images/face.svg" id="face"></object>
JS
$(function(){
var svgObject = document.getElementsByTagName('object')[0];
svgObject.onload = function(){
var mySvg = svgObject.contentDocument.getElementsByTagName('svg')[0];
var two = new Two({
fullscreen:false,
autostart: true
}).appendTo(document.body);
var shape = two.interpret(mySvg);
console.log(shape);
two.update();
two.bind('update', function() {
shape.rotation += 0.01;
});
};
});
由于引用问题中的代码似乎适用于个人,我假设我只是有一个语法错误。关于发生了什么的任何想法?
编辑:在弗朗西斯的帮助下,我能够解析我自己的 SVG,以便与弗朗西斯提到的 for 循环一起使用,以便访问其中的元素,但似乎正在考虑以下 SVG 中的嵌套 G 标记为空。 ..由于某些原因:
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="280" width="280" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><g id="layer1" transform="matrix(0.99999301,0,0,1,-400.71477,-954.83987)"><g id="g3836" transform="matrix(-0.08567939,-0.08567939,0.08567939,-0.08567939,574.3717,1199.1604)"><path id="path3801" fill="#3b5998" d="m805.17-1221.6c-902.43,902.43-902.43,2365.6,0.00003,3268l517.13-517.1c-616.83-616.83-616.83-1616.9,0-2233.8z"/><path id="rect3822" fill="#FFF" d="m266.93,336.2c0.15806,60.722,23.582,102.66,103.93,102.66h44.694v62.567h71.844v-62.57h184.55v-73.089h-184.55v-62.849l-71.844-8.5959v71.445h-44.69c-20.309,0-35.863-7.2042-35.863-35.676v-38.658h-64.869c-2.0284,15.729-3.2307,30.752-3.1941,44.765z"/></g></g></svg>
此外,Chrome 在加载时会引发以下错误:
'Uncaught TypeError: Cannot read property 'nodeName' of null' 在第 68 行,在 handler() 函数中(这是我认为嵌套的 G 被认为是 null):
xmlDocValue.value+=XMLdoc.childNodes.item(1).nodeName +"\n"
'Uncaught TypeError: Cannot read property 'childNodes' of undefined' 在上述 for 循环中,我认为这是因为 null 元素被认为是 null 的事实:
myGElems = XMLdoc.childNodes.item(0).childNodes