SVG-Transformationen in JavaScript

SVG-Transformationen erfolgt durch JavaScript-Einstellungen Ihrer entsprechenden Attribute setAttribute("transform", "translate(x,y)") sollte aber auch möglich sein, durch Reine JavaScript.

elem.transform.baseVal.getItem(0).setTranslate(x, y);
elem.transform.baseVal.getItem(0).setRotate(x, y);

Diese beiden sollten für die translation und rotation, aber wie wäre es, neigen, skalieren und matrix? elem.transform.baseVal.getItem(0).setMatrix() vorhanden ist, aber soweit ich sagen kann, es nicht außer jeder params und SVGCreateMatrix() übernimmt keine params entweder. Wie soll ich dies tun, und als bonus-Frage: was bedeutet getItem(0) tatsächlich?

InformationsquelleAutor Roger | 2013-05-29
  1. 21

    Jeder <svg> element hat eine createSVGMatrix dom-Methode.

    var matrix = svgElement.createSVGMatrix();

    Dies ist die Identitätsmatrix.

    Können Sie dann manipulieren Sie diese...

    matrix = matrix.translate(10, 10);

    oder direkt...

    matrix.a = 3;

    und verwenden Sie dann

    elem.transform.baseVal.getItem(0).setMatrix(matrix);

    getItem(0) bekommt das erste element in einer transform-Attributs z.B.

    transform="translate(1, 1) scale(2)"

    getItem(0) bekommt die translate(1, 1) matrix und getItem(1) bekommt die scale(2) matrix

    Wenn Sie nicht setzen eine Transformation auf ein element dann getItem(0) werfen. Sie können überprüfen, wie viele Elemente gibt es mit numberOfItems und/oder hinzufügen von einem ersten Element mit createSVGTransformFromMatrix schalten Ihre matrix in eine verwandeln und appendItem Anhängen der Transformation.

    • Vielen Dank, ich verstehe es jetzt.
    InformationsquelleAutor Robert Longson
Schreibe einen Kommentar