javascript - 使 SVG 变换矩阵围绕其中心旋转

标签 javascript math matrix svg transform

HTML

<rect id="red" style="fill: red;" height="100" width="20"></rect>

JS

var layer = 
{  
    sizeReal   : { "width": 20, "height": 100 }                   
,   sizeScaled : { "width": 10, "height": 50 }
,   position   : { "x": 200, "y": 200 } 

,   scale      : 0.5
,   rotation   : 0
,   matrix     : [ 1, 0, 0, 1, 0, 0 ]
};

// Not sure if its the cleanest way but it works it rotates itself arounds its center.
//
$("#red")[0].setAttribute( 'transform', 'translate(' + layer.position.x + ',' + layer.position.y +') rotate(' + layer.rotation +',' + ( layer.sizeScaled.width  / 2 ) + ',' + ( layer.sizeScaled.height / 2 ) + ') scale(' + layer.scale + ',' + layer.scale +')' ) 

上面的示例通过应用变换来更改 SVG 矩形。我想做同样的事情,使用矩阵。我正在使用 Sylvester 来乘以矩阵。我做了一个 fiddle 来弄清楚这个问题:)

http://jsfiddle.net/xYsHZ/3/

我希望红色矩形的行为与绿色矩形相同。我做错了什么?

最佳答案

已修复!矩阵元素的顺序是错误的:)

$("#red")[0].setAttribute( 'transform', 'matrix(' + layer.matrix[ 0 ][ 0 ] + ',' + layer.matrix[ 1 ][ 0 ] + ',' + layer.matrix[ 0 ][ 1 ] + ',' + layer.matrix[ 1 ][ 1 ] + ',' + layer.matrix[ 0 ][ 2 ] + ',' + layer.matrix[ 1 ][ 2 ] + ')' );
},50);

http://jsfiddle.net/6DR3D/2/

关于javascript - 使 SVG 变换矩阵围绕其中心旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13663343/

相关文章:

javascript - 如何使用 javascript 将 div 标签数据设置为 li 标签?

javascript - JS复制输入的值

java - 数字与分数相乘

javascript - Math.tan (45) 答案

将一个整数范围可逆地映射到另一个整数范围的算法?

python - 在python中生成条件随机二进制数组矩阵

javascript - 如何使用 React 一次更新单个元素而不是所有元素的投票计数器

javascript - Flex - 调用 JavaScript 函数并打开显示数据的弹出窗口

c++ - 像素完美投影矩阵?

Java - 出现编译错误,不兼容的类型 int 无法转换为 [][]