我减少了我在SVG中遇到的一些奇怪的行为,我想出了this test case:
<circle r="10" />
<rect width="18" height="18" />
<polygon points="10,20 30,30 40,15 25,10" />
<script>
var svg = document.querySelector('svg'),
els = document.querySelectorAll('svg *');
for (var i=els.length;i--;){
var el = els[i];
el._dragXForm = el.transform.baseVal.appendItem(svg.createSVGTransform());
setInterval((function(el){
return function(){
var tx = el._dragXForm.matrix;
tx.e += Math.random()*2-1;
tx.f += Math.random()*2-1;
}
})(el),50);
}
</script>
在OS X上的Safariv5和Chromev18中,圆圈和多边形都抖动,但是矩形没有。它什么都不做。 SVGMatrix
获取新值,但屏幕上的外观未更新。 (在Firefox中,它按预期工作。)
如果我更改脚本以删除_dragXForm
like so:
for (var i=draggables.length;i--;){
var el = draggables[i];
el.transform.baseVal.appendItem(svg.createSVGTransform());
setInterval((function(el){
return function(){
var tx = el.transform.baseVal.getItem(0).matrix;
tx.e += Math.random()*2-1;
tx.f += Math.random()*2-1;
}
})(el),50);
}
...然后<rect>
与其他人一起移动。
除了看起来像一个疯狂的bug(这怎么只会影响<rect>
?!)我觉得这还没有隔离出bug的来源。
什么是最简单的代码可以重现这种奇怪的行为?(如果已经有一个错误提交,我很想知道它。)
答案 0 :(得分:0)
This code似乎越来越接近问题的核心:
var svg = document.querySelector('svg'),
els = document.querySelectorAll('svg *');
for (var i=els.length;i--;){
var el = els[i],
tx = el.transform.baseVal.appendItem(svg.createSVGTransform());
console.log( el.tagName, tx===el.transform.baseVal.getItem(0) );
setTimeout((function(el,tx){
return function(){
console.log( el.tagName, tx===el.transform.baseVal.getItem(0) );
}
})(el,tx),1);
}
输出:
polygon true // The return value of appendItem is the same as the first item
rect true // The return value of appendItem is the same as the first item
circle true // The return value of appendItem is the same as the first item
polygon true // The returned value is STILL the same as the first item
rect false // The returned value is NO LONGER the same as the first item
circle true // The returned value is STILL the same as the first item