CODEWITHSUNDEEP
javascriptmatrixsvgtransform
Metalskin
Metalskin

Reputation: 4268

SVG Javascript and managing translate matrices when doing rotations

I've got a series of SVG files that have been created in inkscape (or similar vector graphics application).

The editing tools apply translations to elements within the SVG when they are moved around the screen (apparently they do this for efficiency reasons). These tools set the transformation of each element that is dragged, resized, etc, based on a matrix.

The problem is that if I try and apply a rotation to an element within a SVG from within javascript, the application of the rotation is overwriting the transformation. This results in a lot more than just a rotation, as the matrix is replaced with the rotation.

I'm presuming I need to retrieve the matrix, update the matrix with the rotation that I wish and then re-apply the matrix.

Can someone explain how one does this when trying to increment the rotation by fractions of a degree please (factions due to performing animation).

I've created an example in JSFiddle here. While it's not obvious what is happening, I've tested the code locally. When inspecting via firebug I can see that the transform attribute is being replaced with a rotate(r).

btw, I've been reading through the w3 site and I've only found this. While it talks about the matrix in depth, it doesn't provide any examples. I'm finding it hard to read as the last time I studied matrices was back in the 80s. It does appear to me though that I may need to do some matrix multiplication and possibly use cos and sin. Kinda hoping that I don't because I'm uncertain of the performance impact of using such an approach while animating.

Btw, I've already looked at tools to strip out the transformations from the SVG. However as the SVG files I wish to use are a part of another project, I would rather avoid doing this. Also it creates problems in the future as I wish to let people create their own SVG to use with the software I'm writing.

Upvotes: 0

Views: 1446

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

Use the SVG DOM to append a translation rather than overwriting it.

$('#control1').mousedown(function() {

    if (timer !== null) {
        clearInterval(timer);
        timer = null;
    }

    // change to stop if the current anim is running, and get the current angle
    timer = setInterval(function() {
        angle += 1;

        if (angle >= 360) {
            angle -= 360;
        }

        if (anim.transform.baseVal.numberOfItems < 2) {
          var transform = document.getElementById("arm1").createSVGTransform();
          transform.setRotate(angle, 100, 100);
          anim.transform.baseVal.appendItem(transform);
        } else {
          anim.transform.baseVal.getItem(1).setRotate(angle, 100, 100);
        }
    }, 1);

});

Upvotes: 1

Related Questions