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 Path Element Line Command Open in Sandbox

Description

This interactive demonstrates the line command for the SVG path element. There are two controls that allow the user to control the start and end points of the line. There is also a checkbox that allows the user to toggle between relative and absolute commands

Script

/**
* @title SVG Path Element Line Command
* @description This interactive demonstrates the line command for the SVG path element. There are two controls that allow the user to control the start and end points of the line. There is also a checkbox that allows the user to toggle between relative and absolute commands
* @date May 3, 2019
* @author Kurt Bruns
* @tags [svg]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.border = true;
interactive.width = 736;
let path = interactive.path('');
path.classList.add('default');
let start = interactive.control(150, 150);
let end = interactive.control(450, 50);
let toggle = interactive.checkBox(360, 270, "absolute / relative", false);
let text = interactive.text(25, 275, "");
path.update = function () {
    if (toggle.value) {
        path.d = `m ${start.x}
                ${start.y}
              l ${end.x - start.x}
                ${end.y - start.y}`;
    }
    else {
        path.d = `M ${start.x}
                ${start.y}
              L ${end.x}
                ${end.y}`;
    }
};
path.update();
path.addDependency(start);
path.addDependency(end);
path.addDependency(toggle);
// TODO: this is rather hacky, and probably best replaced by implementing the
// tspan element in our SVG wrapper class.
text.update = function () {
    let tag = `<tspan style="fill:purple">path</tspan>`;
    let d = `<tspan style="fill:#ab6f00">d</tspan>`;
    this.contents = `&lt;${tag} ${d}="${path.d}"&gt`;
};
text.update();
text.addDependency(path);
//# sourceMappingURL=svg-path-line.js.map