jQuery-ui 简单的在线SVG图形编辑器

Simple SVG Editor

svg, tool, editor

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var svgInput = document.getElementById('svgInput');
var svgOutput = document.getElementById('svgOutput');

/*Sync editor and image*/
//http://stackoverflow.com/questions/2823733/textarea-onchange-detection
svgInput.addEventListener('input', refreshOutput);
refreshOutput();

function refreshOutput() {
    //http://stackoverflow.com/questions/584751/inserting-html-into-a-div
    svgOutput.innerHTML = svgInput.value;
}

/*Implement "Swiped arc"*/
$('#arcSwipe').click(function() {
    function sq(x) {
        return x * x;
    }

function sqrt(x) {
        return Math.sqrt(x);
    }

var center = $('#arcCenter').val().split(',');
    var centerX = parseFloat(center[0]),
        centerY = parseFloat(center[1]);
    var start = $('#arcStart').val().split(',');
    var startX = parseFloat(start[0]),
        startY = parseFloat(start[1]);
    var degr = parseFloat($('#arcDegrees').val());

var big = (Math.abs(degr) > 180) ? 1 : 0;
    var ccw = (degr > 0) ? 1 : 0;

var dx = startX - centerX;
    var dy = startY - centerY;
    var radStart = Math.atan(dy / dx);
    if (dx < 0) {
        radStart += Math.PI;
    }
    var degrRad = degr * Math.PI / 180;

var r = sqrt(sq(dx) + sq(dy));
    var radEnd = radStart + degrRad;
    var endX = Math.cos(radEnd) * r + centerX;
    var endY = Math.sin(radEnd) * r + centerY;

function coord(x, y, doRound) {
        if (doRound) {
            function round(num, digits) {
                var log10 = Math.log10(Math.abs(num));
                var multiplier = Math.pow(10, digits - Math.floor(log10) - 1);

var normalized = Math.round(num * multiplier) / multiplier;
                return normalized;
            }
            x = round(x, 4);
            y = round(y, 4);
        }
        return x + ',' + y + ' ';
    }
    var path = '<path d="M' + coord(centerX, centerY) +
        'L' + coord(startX, startY) +
        'A' + coord(r, r, true) + '0 ' + coord(big, ccw) + coord(endX, endY, true) + '" />\n';

//debugger
    //$('#arcPath').text(path);
    editor.insert(path);
    editor.focus();
});

/*Download the completed image*/
var downloader = document.getElementById('downloader');
downloader.addEventListener('click', download);

function download(e) {
    var svg = svgInput.value;

//http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem

//Option 1 - opens image in new tab:
    //e.preventDefault();
    //open("data:image/svg+xml," + encodeURIComponent(svg));

//Option 2 - actual download:
    var b64 = btoa(unescape(encodeURIComponent(svg)));
    downloader.setAttribute('href', 'data:image/svg+xml;base64,' + b64);
}

/*Add fancy-schmancy editor*/
//http://stackoverflow.com/questions/6440439/how-do-i-make-a-textarea-an-ace-editor
var textarea = $(svgInput);
var editID = textarea.attr('id') + '-proxy';
var editDiv = $('<div>', {
        id: editID,
        'class': textarea.attr('class')
    })
    .insertBefore(textarea);
textarea.hide();

var editor = ace.edit(editID);
editor.$blockScrolling = Infinity;
editor.setOptions({
    //enableBasicAutocompletion: true,
    enableLiveAutocompletion: true
});
editor.getSession().setMode("ace/mode/xml");

editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function() {
    textarea.val(editor.getSession().getValue());
    //This doesn't trigger the textarea's "input" event, so we need to push an update:
    refreshOutput();
});

$('#prettify').click(function() {
    var cur = editor.getCursorPosition();
    var svg = editor.getSession().getValue();

svg = vkbeautify.xml(svg);
    svg = svg.replace(/\s*xmlns([:|=])/g, ' xmlns$1');

editor.getSession().setValue(svg);
    editor.moveCursorToPosition(cur);
    editor.focus();
});

editDiv.resizable({
    resize: function(event, ui) {
        editor.resize();
    },
    //stop: function( event, ui ) {  }
});

编译

CSS

HTML

<script src="/uploads/160601/ace.js"></script>
<script src="/uploads/160601/ext-language_tools.js"></script>
<script src="/uploads/160601/vkbeautify.js"></script>

<h1>Simple SVG Editor</h1>

<button id="prettify">Prettify</button>
<textarea id="svgInput" class="svg-editor">
    <svg xmlns="https://www.w3.org/2000/svg" height="300" width="600">
        
        <g stroke="black" stroke-width="2" fill="none">
            <path d="M90,90 v-80 a80,80 0 0,0 -80,80 z" fill="red" />
            <path d="M100,100 h-80 a80,80 0 1,0 80,-80 z" fill="gold" />
        </g>
        <path d="M100,270 l 50,-20 
             a25,25 -30 0,1 50,-20 l 50,-20 
             a25,50 -30 0,1 50,-20 l 50,-20 
             a25,75 -30 0,1 50,-20 l 50,-20 
             a25,100 -30 0,1 50,-20 l 50,-20" fill="none" stroke="blue" stroke-width="4" />
    </svg>
</textarea>

<div class="tool-row swipe-arc">
    <b>Swiped Arc</b>
    <br />
    <div>
        <label>Center:</label>
        <input id="arcCenter" type="text" />
    </div>
    <div>
        <label>Starting point:</label>
        <input id="arcStart" type="text" />
    </div>
    <div>
        <label>Degrees (CW):</label>
        <input id="arcDegrees" type="text" />
    </div>
    <div>
        <button id="arcSwipe">Swipe</button>
    </div>
    <label id="arcPath" />
</div>

<div class="tool-row svg-preview">
    <div id="svgOutput"></div>
    <a id="downloader" download="drawing.svg" href-lang="image/svg+xml" href="">Download</a>
</div>

Simple SVG Editor

svg, tool, editor

编辑器支持Emmet

快捷键

Simple SVG Editor

svg, tool, editor

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

jQuery+SVG 可改变参数的动态背景图案演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：