设置SvgElement样式和转换的正确方法

Question

设置svg元素的样式和变换有多种方法。例如，您可以通过以下方式设置样式：

element.style.setProperty('opacity', '0.5');
element.style.setProperty('stroke', 'red');

或

element.style
..opacity = '0.5'
..stroke = 'red';

您可以按以下方式设置变换：

element.setAttribute('transform', 'translate($x, $y)');

或this post

中提到的方法

element.transform.baseVal.first.setTranslate(x, y);
or
element.transform.baseVal.appendItem(transform);

我的问题是，就性能而言，哪种方法更好用或者相同？

Answer 1

您的变换方法未显示matrix transforms;）...

我可以通过变换来谈论我的观点。基本上，如果要对元素应用多个变换，则使用matrices更有效，而不是将变换值扩展为长字符串。我大约5年前测试了这个，用我自己的基准测试（我无法在我的文件中找到它），并回想起一个小小的改进。在任何情况下，矩阵都易于使用，用于扩展变换。