svg - 设置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年前，我用自己的基准测试(我在文件中找不到它)对此进行了测试，并记得有一个小的改进。在任何情况下，矩阵都是易于使用的扩展扩展变换。