Dart SVG Translate an object

问题:

I'm trying to translate an ellipse in SVG with Dart. I haven't found any explanation on how to do that, other than the SetAttribute way

ellipse.setAttribute('transform', 'translate($acx, $acy)');

I have found that the EllipseElement has a notation like this:

ellipse.transform.baseVal[...].setTranslate(acx,acy);

..but it doesn't work. I'm totally not sure how setTranslate works and I suppose I have to tell which element to translate but I have no idea how. Is it better to use setATtribute instead of trying to use the other method?

回答1:

I successfully tried

ellipse.setAttribute('transform', 'translate(150, 150)');

if you create the transform attribute using setAttribute then the following is working too

ellipse.transform.baseVal.first.setTranslate(20, 100);

or you can add a Transform as shown in the answer to this question Dart create and transform an SVG path

Matrix m = new svg.SvgSvgElement().createSvgMatrix();
Matrix m2 = m.translate(50, 50);
Transform tr = ellipse.transform.baseVal.createSvgTransformFromMatrix(m2);
ellipse.transform.baseVal.appendItem(tr);

You can set the color with

ellipse.style.setProperty('fill', '#07f');