0

我减少了我在 SVG 中遇到的一些奇怪行为，并提出了这个测试用例：

<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 像这样删除：

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>与其他人一起移动。

除了看起来像一个疯狂的错误（这怎么可能只影响一个<rect>？！）我觉得这还没有隔离错误的来源。

可以重现这种奇怪行为的最简单的代码是什么？（如果已经为此提交了一个错误，我很想知道它。）

4

1 回答 1

0

这段代码似乎越来越接近问题的核心：

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
于 2012-04-29T05:11:22.007 回答