Vector.js

Vector is an open source javascript library for creating interactive graphics. View the repository, browse the API, run the tests, or meet the team.

SVG Transform Rotate Attribute Open in Sandbox

Description

This interactive how the rotate transformation can be applied to a SVG element.

Script

/**
* @title SVG Transform Rotate Attribute
* @description This interactive how the rotate transformation can be applied to a SVG element.
* @tags [svg]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 736;
interactive.height = 300;
interactive.border = true;
let w = 50;
interactive.originX = interactive.width / 2;
interactive.originY = interactive.height / 2;
let group = interactive.group();
let r1 = interactive.rectangle(0, 0, w, w);
let r2 = interactive.rectangle(w, 0, w, w);
let r3 = interactive.rectangle(0, w, w, w);
let r4 = interactive.rectangle(w, w, w, w);
group.root.appendChild(r1.root);
group.root.appendChild(r2.root);
group.root.appendChild(r3.root);
group.root.appendChild(r4.root);
r4.style.fill = '#d8d8d8';
r3.style.fill = '#aaaaaa';
r2.style.fill = '#555555';
r1.style.fill = '#333333';
group.style.opacity = '.7';
let control = interactive.control(2 * w, 0);
control.constrainToCircle(0, 0, 2 * w);
let rotateText = interactive.text(75, interactive.maxY - 20, '');
rotateText.addDependency(control);
rotateText.update = function () {
    rotateText.contents = `rotate(${getAngle()})`;
};
rotateText.root.setAttribute('alignment-baseline', 'middle');
rotateText.root.setAttribute('text-anchor', 'middle');
rotateText.update();
group.addDependency(rotateText);
group.update = function () {
    group.root.setAttribute('transform', rotateText.contents);
};
function getAngle() {
    let angle;
    if (control.y <= 0) {
        angle = Math.abs(Math.atan2(control.y, control.x));
    }
    else {
        angle = Math.PI * 2 - Math.atan2(control.y, control.x);
    }
    return (360 - angle * 180 / Math.PI).toFixed(1);
}
//# sourceMappingURL=svg-rotate.js.map