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 に答える