SVGMatrix と CSSMatrix なんていうものがあるらしい。W3C のメーリングリストで知った。(もしや常識だった?)

There are already 2 such classes: SVGMatrix and CSSMatrix. The former is an affine transformation matrix (commonly misnamed a "2x3 matrix") and the latter is a 3D homogeneous transformation matrix (commonly correctly named a "4x4 matrix").

We added CSSMatrix to the CSS Transform Spec to give us the same functionality as SVG Matrix, but for 3D transforms. Therefore both of these classes are pretty light on their operators. It might be useful to discuss "one matrix to rule them all", which could be used in place of the current classes and with more functionality. But it's important not to go too far down this path, or you'll end up defining classes for Points, Lines, Planes, Bounding Boxes and View Volumes with dozens of functions. Down that path lies madness.


SVGMatrix の仕様は Coordinate Systems, Transformations and Units ? SVG 1.1 (Second Edition) にある。↓のようにして色んなブラウザですでに使える。(IE9 も HTML5 のページだと document.createElementNS があるので使える)

var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
var mat = svg.createSVGMatrix();
mat.a // => 1
mat.b // => 0
mat.c // => 0
mat.d // => 1
mat.e // => 0
mat.f // => 0

アフィン変換をするための rotate や skewX などのメソッドや、flipX とかもある。同じく SVG DOM の SVGTransform の setMatrix にこの SVGMatrix を渡せる。

CSSMatrix のほうは CSS Transforms Module Level 1 にある。こういう 3D のアフィン変換を扱うメソッドが用意されている。


I think the current spec handles the more complex (inverse and multiply) and more commonly used (scale, rotate, translate) functions. I'm not sure what adding and subtracting 2 matrices means, and division is handled by inverse and multiply. The others seem pretty domain specific for a general class. And remember you can (and many people have) created JS libraries to add funcrtions to the built-in matrix classes. I wrote one:


which uses CSSMatrix if it exists and uses JS otherwise. It exposed some interesting deficiencies in the current CSSMatrix class. There are several bugs on WebKit to address these and other issues of matrix efficiency and functionality: 23799, 28850, 50633, 52488. Perhaps it would be useful to open these (or similar) bugs on the w3c bug system?

That's where I believe we are on the Matrix front.

J3DIMath.js を見てみると、こんなふうになってた。

J3DIHasCSSMatrix = false;
J3DIHasCSSMatrixCopy = false;
if ("WebKitCSSMatrix" in window && ("media" in window && window.media.matchMedium("(-webkit-transform-3d)")) ||
                                   ("styleMedia" in window && window.styleMedia.matchMedium("(-webkit-transform-3d)"))) {
    J3DIHasCSSMatrix = true;
    if ("copy" in WebKitCSSMatrix.prototype)
        J3DIHasCSSMatrixCopy = true;


J3DIMatrix4 = function(m)
    if (J3DIHasCSSMatrix)
        this.$matrix = new WebKitCSSMatrix;
        this.$matrix = new Object;


とりあえずnew WebKitCSSMatrix が Chrome で使えるのは確認。

トラックバック - http://javascript.g.hatena.ne.jp/edvakf/20110314