本文介绍了正确的方式设置SvgElement样式和转换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

There are multiple ways to set a svg element's styles and transforms. For example, you can set the style through:

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

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

您可以通过以下方式设置转换:

You can set transforms by:

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

或者

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

我的问题是,在性能方面,哪种方法更好使用或它们是相同的? / p>

My question is, in terms of performance, which method is better to use or they are same?

推荐答案

您的变换方法未显示 matrix transforms ;) 。

Your methods of transforms did not show matrix transforms;)...

我可以用变换说出我的意见。基本上,如果要对一个元素应用多个变换,则使用 matrices 更有效,而不是将变换值扩展为长字符串。我测试了这大约5年前,与我自己的基准(我不能在我的文件中找到它),并回想一个小的改进。在任何情况下,矩阵都很容易使用,对于扩展变换。

I can speak about my opinions with transforms. Basically, if you are going to apply more than one transform to an element, it is more efficient to use matrices, rather than extending the transform values as long strings. I tested this about 5 years ago, with my own benchmark(I can't find it in my files), and recall a minor improvement. In any case, matrices are easy to work with, for extended transforms.

这篇关于正确的方式设置SvgElement样式和转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-14 05:43