小编Att*_* Ch的帖子

我有很多不同尺寸的svg形状,我必须动态地用不同角度旋转它们.我想用矩阵中心旋转它们,我在计算矩阵的e,f时遇到了问题.如何计算矩阵(a,b,c,d,e,f)中的e,f.我有一个角度,但不知道计算新的位置,所以看起来它是在中心旋转.这是一个我旋转45度的示例形状,

     <rect x="0" y="0" width="50" height="50" style="stroke: #3333cc;fill:none;" transform="matrix(1,0,0,1,100,100)"></rect>

   <rect x="0" y="0" width="50" height="50" style="fill: #3333cc" transform="matrix(0.707,-0.707,0.707,0.707,100,100)"></rect>

我需要帮助深入理解SVG中的矩阵.我已经知道矩阵,我想旋转和缩放而不使用缩放或旋转字.我想使用transform ='matrix(a,b,c,d,e,f)'.我知道'a/d'值确定比例,'e/f'确定位置.tan(b),tan(c)确定偏斜.cos(a),sin(b), - sin(c),cos(d)决定角度.但我想知道这是如何工作的,我需要彻底帮助理解SVG中的矩阵.

为什么这条路不可见？我使用javascript动态创建路径,但路径在屏幕上不可见,但它存在于DOM中.

var svg = document.getElementById('svg');
var path = document.createElementNS('http://www.w3.org/svg', 'path');
path.setAttribute('d', 'M100,100 L100,100');
path.setAttribute('style', 'stroke:black;fill:none;');
path.setAttribute('matrix', '1,0,0,1,100,100');
svg.appendChild(path);

或者作为一个JsFiddle