Creating a new SVGTransform object to append to SVGTransformList

Question

I was playing with firefox 3.6 and wanted to add a translation to an svg element when clicked; this element already had other translations on it.

var svgs = document.getElementsByTagName("svg:svg");
var group = svgs[0].childNodes[1];
group.addEventListener("click",function(e){
    var group2 = group.cloneNode(true);
    group2.setAttribute("transform", group2.getAttribute("transform")+" translate(10,10)");
    svg2.insertBefore(whole2, whole);
},false);

But another way to do the setAttribute line would be:

group2.translate.baseVal.appendItem(newSVGTransformTranslation);

Where I'm getting stuck is I can call

newSVGTransformTranslation =
  new SVGTransform(SVGTransform.SVG_TRANSFORM_TRANSLATE);

but the resulting object does not have the setTranslate(x,y) method that I expect; nor any setters. Oddly group2.translate.baseVal.getItem(0) does have it, but no clone or copy methods are available.

I must be using the constructor incorrectly. Does anyone have an example of the correct form?

Answer 1

See SVGSVGElement.createSVGTransform.

An example:

var tfm = svgroot.createSVGTransform();
tfm.setTranslate(x,y);