设置SvgElement样式和变换的正确方法(The right way to set SvgEle

有多种方法来设置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)');

或方法中提到的这篇文章

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

我的问题是，在性能方面，其方法是更好地使用或它们是一样的吗？

Answer 1:

你变换的方法没有显示matrix transforms ;）...

我可以对我有意见的变换说话。 基本上，如果你要申请一个以上的变换到一个元素，它是更有效地使用matrices ，而不是扩展变换值，只要字符串。 我大约5年前测试了，用我自己的基准（我不能在我的文件找到它），并调用一个很小的改善。 在任何情况下，基质是易于使用，延长变换。

文章来源: The right way to set SvgElement styles and transforms