RaphaelJS transformPath vs SVG transforms (v5)

Revision 5 of this benchmark created on

Description

A perf comparison between RaphaelJS's Raphael.transformPath and directly applying a transformation to an SVG element with Element.transform.

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script>
var paper = Raphael(0, 0, 500, 500);
</script>

Setup

var element = paper.path('M19.37-26.11C35.64-28.95,48.37-34.95,57.56-44.1C59.2-45.74,60.68-47.54,62-49.5C63.32-51.42,64.36-53.47,65.12-55.67C66-58.19,66.44-60.77,66.44-63.41C66.44-68.64,64.62-73.08,60.98-76.72C59.7-78,58.3-79.14,56.78-80.14C55.1-81.26,53.33-82.22,51.45-83.02C49.41-83.81,47.33-84.47,45.21-84.99C41.17-85.87,36.7-86.31,31.78-86.31C29.7-86.31,27.9-86.17,26.38-85.89C25.58-85.73,24.82-85.43,24.11-84.99C23.23-84.52,22.55-83.8,22.07-82.84C21.71-82,21.53-81.02,21.53-79.9C21.53-79.9,21.53-79.18,21.53-79.18C18.97-70.82,16.43-62.41,13.91-53.93C11.11-44.22,8.44-34.47,5.88-24.67C4.88-21.03,3.92-17.36,3-13.64C1.48-7.32,0.52-2.81,0.12-0.09C0.04,0.55,0,1.17,0,1.77C-0.04,3.05,0.78,4.15,2.46,5.07C3.94,5.87,5.54,6.25,7.26,6.21C9.53,6.25,11.09,5.39,11.93,3.63C12.13,3.23,12.29,2.85,12.41,2.49C12.65,1.69,12.81,0.89,12.89,0.09C13.53-3.06,14.37-6.68,15.41-10.76C16.69-15.88,18.01-21,19.37-26.11C19.37-26.11,19.37-26.11,19.37-26.11C19.37-26.11,19.37-26.11,19.37-26.11M22.25-36.49C23.72-42.24,25.32-47.94,27.04-53.58C29.04-60.05,31.2-66.47,33.52-72.82C35.24-73.34,37.22-73.62,39.46-73.66C41.37-73.66,43.29-73.5,45.21-73.18C49.45-72.46,52.49-70.92,54.33-68.56C55.21-67.48,55.64-66.25,55.64-64.85C55.6-63.25,55.37-61.69,54.92-60.17C54.36-58.57,53.61-57.03,52.65-55.55C51.69-54.11,50.63-52.75,49.47-51.48C48.11-50.04,46.73-48.7,45.33-47.46C45.33-47.46,45.27-47.46,45.27-47.46C38.68-41.74,31-38.08,22.25-36.49C22.25-36.49,22.25-36.49,22.25-36.49C22.25-36.49,22.25-36.49,22.25-36.49').attr('stroke', '#000');

Teardown


    paper.clear();

Test runner

Ready to run.

Testing in
TestOps/sec
Element.transform translate
element.transform('t50,50');
ready
Raphael.transformPath translate
var newPath = Raphael.transformPath(element.attr('path'), 't50,50');
element.attr('path', newPath);
ready
Element.transform scale
element.transform('s5');
ready
Raphael.transformPath scale
var newPath = Raphael.transformPath(element.attr('path'), 's5');
element.attr('path', newPath);
ready
Element.transform translate and scale
element.transform('t50,50s5');
ready
Raphael.transformPath translate and scale
var newPath = Raphael.transformPath(element.attr('path'), 't50,50s5');
element.attr('path', newPath);
ready

Revisions

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