SVG transform

JavaScript performance comparison

Revision 6 of this test case created by

Preparation code

<script>
	function createRect(y){
	  var r = document.createElementNS(ns, 'rect');
	  r.setAttribute('height', 10);
	  r.setAttribute('width', 10);
	  r.setAttribute('y', y);
	  r.setAttribute('x', 10);
	  r.setAttribute('stroke', '#000000');
	  r.setAttribute('fill', '#007fff');
	  svg.appendChild(r);
	  return r;
	}
	
	function createTransform(rect) {
		var t1 = rect.ownerSVGElement.createSVGTransform();
		var t2 = rect.transform.baseVal.appendItem(t1);
		return t2;
	}

  var value = 42;
  var ns = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(ns, 'svg');
  document.body.appendChild(svg);
  var x = 0;
  
  var r1 = createRect(10);
  var r2 = createRect(50);
  var r3 = createRect(90);
  var r4 = createRect(130);

  var r2Transform = createTransform(r2);
  var r3Transform = createTransform(r3);
  var r4Transform = createTransform(r4);
  var r4Matrix = r4Transform.matrix;
</script>
    

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Set Transform String
x = (x+5) % 123;
r1.setAttribute("transform", "translate(" + x + " 0)");
pending…
Manipulate transform with API
x = (x+5) % 123;
r2.transform.baseVal.getItem(0).matrix.e = x;
pending…
Manipulate transform with cached transform
x = (x+5) % 123;
r3Transform.matrix.e = x
pending…
Manipulate transform with setTranslate API
x = (x+5) % 123;
r2.transform.baseVal.getItem(0).setTranslate(x,0);
pending…
Cached transform with setTranslate API
x = (x+5) % 123;
r3Transform.setTranslate(x,0);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments