SVG在线彩虹线条图案生成器

SVG Draw Your Own Rainbow Lines, 使用鼠标绘制彩虹线条。

svg，tool

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 8204
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var svg = document.getElementsByTagName("svg")[0];

function drawLine(start, end) {
    var line = document.createElementNS(
        svg.namespaceURI, "line");
    line.setAttribute("x1", start[0]);
    line.setAttribute("y1", start[1]);
    line.setAttribute("x2", end[0]);
    line.setAttribute("y2", end[1]);
    svg.insertBefore(line, null);
}

svg.addEventListener("mousedown", mouseDraw);
svg.addEventListener("keydown", keyDraw);
svg.addEventListener("keyup", endKeyDraw);

function mouseDraw(evt) {
    var start = [evt.clientX, evt.clientY],
        end;
    svg.addEventListener("mouseup", endDraw);

function endDraw(evt2) {
        //svg.removeEventListener("mouseup", endDraw);
        end = [evt2.clientX, evt2.clientY];
        drawLine(start, end);
    }
}

var drawing = false;
var cursor = document.getElementById("cursor");
var keyStart = [];

编译

CSS

HTML

SVG Draw Your Own Rainbow Lines, 使用鼠标绘制彩虹线条。

svg，tool

编辑器支持Emmet

快捷键

SVG Draw Your Own Rainbow Lines, 使用鼠标绘制彩虹线条。

svg，tool

基于D3.js实现的SVG图形在线编辑器

SVG 四面体在线构造器（含3D旋转动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：