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 View Box Attribute Open in Sandbox

Description

This interactive demonstrates how the view box attribute can be applied to a SVG element to change the view port of the image.

Script

/**
* @title SVG View Box Attribute
* @description This interactive demonstrates how the view box attribute can be applied to a SVG element to change the view port of the image.
* @tags [svg]
*/
import { Interactive, getScriptName } from '../../index.js';
let viewBoxControl = new Interactive(getScriptName());
viewBoxControl.border = true;
viewBoxControl.width = 736 / 2;
let viewBox = new Interactive(getScriptName());
viewBox.border = true;
viewBox.width = 736 / 2;
let margin = 30;
for (let i = margin; i < viewBoxControl.width - margin; i += margin) {
    for (let j = margin; j < viewBoxControl.height - margin; j += margin) {
        let r1 = viewBoxControl.rectangle(i, j, 10, 10);
        let r2 = viewBox.rectangle(i, j, 10, 10);
        let red = Math.floor(255 * i / (viewBoxControl.width - margin));
        let green = Math.floor(255 * j / (viewBoxControl.height - margin));
        r1.classList.add('default');
        r2.classList.add('default');
        r1.style.fill = `rgb(${red}, ${green}, 255)`;
        r2.style.fill = `rgb(${red}, ${green}, 255)`;
        r1.style.opacity = '.7';
        r2.style.opacity = '.7';
    }
}
let rect = viewBoxControl.rectangle(0, 0, 0, 0);
rect.classList.add('default');
let c1 = viewBoxControl.control(110, 110);
let c2 = viewBoxControl.control(110 + 90, 110 + 90 * viewBox.height / viewBox.width);
c2.update = function () {
    this.x += c1.dx;
    this.y += c1.dy;
};
c2.addDependency(c1);
rect.update = function () {
    this.x = c1.x;
    this.y = c1.y;
    this.width = c2.x - c1.x;
    this.height = c2.y - c1.y;
};
rect.update();
rect.addDependency(c1);
rect.addDependency(c2);
viewBox.addDependency(rect);
viewBox.update = function () {
    if (rect.width < 0 || rect.height < 0) {
    }
    else {
        viewBox.setViewBox(rect.x, rect.y, rect.width, rect.height);
    }
};
viewBox.update();
//# sourceMappingURL=svg-view-box.js.map