Dynamic SVG creation

Developer
Ilia
Size
5,075 Kb
Views
30,360
  1. Dynamic SVG creation Previews
  2. Dynamic SVG creation HTML Codes
  3. Dynamic SVG creation CSS Codes
  4. Dynamic SVG creation JS Codes

How do I make an dynamic svg creation?

Testing out creation of dynamic SVG objects and their manipulation.. What is a dynamic svg creation? How do you make a dynamic svg creation? This script and codes were developed by Ilia on 04 August 2022, Thursday.

Dynamic SVG creation Previews
IQ Test

Dynamic SVG creation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic SVG creation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg"> <g class="rtm-obj ostat-problem"> <polygon points="54,1 67,1 69,3 69,15" class="obj-tab"/> <circle cx="50" cy="20" r="19" class="obj-body"/> <path d="M50 2 V8 A14 14 0 1 0 50 37 V38 A18 18 0 1 1 50 2 Z" class="obj-status"/> <rect x="0" y="42" width="100" height="50" class="obj-label"/> <text y="56" class="obj-text"> <tspan x="50">The quick brown</tspan> <tspan x="50" dy="15">fox jumped over</tspan> <tspan x="50" dy="15">the lazy dog.</tspan> </text> </g>
</svg>
<div> <button type="button" id="add">add objects</button> <button type="button" id="statusUp">up</button> <button type="button" id="statusDown">down</button> <button type="button" id="statusProblem">problem</button> <button type="button" id="add2">add object #2</button> <button type="button" id="addText">add text</button> <button type="button" id="changePos">reposition</button> <button type="button" id="move">move #2</button>
</div>
<br>
<div><svg id="test" xmlns="http://www.w3.org/2000/svg"></svg></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic SVG creation - Script Codes CSS Codes

html { background:#16181a }
body { background:#444/*1d2329*/; margin:10px }
.obj-tab { cursor:pointer; fill:#1d2329; stroke:#61656a; stroke-width:3 }
.obj-tab:hover { stroke:#44a8c7 }
.obj-body { stroke:#61656a; stroke-width:2; fill:#46494d; cursor:move }
.obj-body:hover { stroke:#44a8c7 }
.obj-status { fill:#808080 }
.ostat-up .obj-status { fill:#0c0 }
.ostat-down .obj-status { fill:#c00 }
.ostat-problem .obj-status { fill:#fc0 }
.obj-label { fill:#1c1c1c }
.obj-text { font:11px sans-serif; fill:#d9d9d9; text-anchor:middle }
#test { border:1px solid #ccc; height:600px; width:100% }

Dynamic SVG creation - Script Codes JS Codes

// wrapper for creating SVG elements, which are a bit different from DOM elements and use createElementNS method
function doSVG (tag, attrs) {	var el = document.createElementNS('http://www.w3.org/2000/svg', tag);	for (var k in attrs) el.setAttribute(k, attrs[k]);	return el;
}
// fast wordwrap function from http://james.padolsey.com/javascript/wordwrap-for-javascript/
function wordwrap (str, width, brk, cut) { brk = brk || '\n'; width = width || 75; cut = cut || false; if (!str) { return str; } var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)'); // use brk=-1 as flag to not join the results into one string but keep it as array return (brk == -1 ? str.match( RegExp(regex, 'g') ) : str.match( RegExp(regex, 'g') ).join(brk)) ;
}
// breaks long strings into multiple lines using <tspan> and returns array of those lines
function doTSpan(text, maxLength, maxLine) { var lines = wordwrap(text, maxLength, -1, true), // maxLine limits number of lines function returns len = (lines.length <= maxLine ? lines.length : maxLine), i = 0, tspans = [], tspan, textNode; for ( ; i < len; i++) { // for the 1st element (i.e. i==0) do tspan w/o dy tspan = !i ? doSVG('tspan', {x:50}) : doSVG('tspan', {x:50, dy:15}); textNode = document.createTextNode(lines[i]); tspan.appendChild(textNode); tspans.push(tspan); } return tspans;
}
var rtmObject = function() { function rtmObject(x, y, className){ if (typeof x == "string"){ this._x = this._y = 0; this._class = x || "rtm-obj"; } else if (typeof y == "string"){ this._x = this._y = x || 0; this._class = y || "rtm-obj"; } else { this._x = x || 0; this._y = y || 0; this._class = className || "rtm-obj"; } this._root = doSVG('g', {'class':this._class, transform:'translate('+this._x+' '+this._y+')', 'data-status':''}); this._text = ''; }; rtmObject.prototype.draw = function(){ this._tab = doSVG('polygon', {points:'54,1 67,1 69,3 69,15', 'class':'obj-tab'}); this._body = doSVG('circle', {cx:50, cy:20, r:19, 'class':'obj-body'}); this._statusObj = doSVG('path', { d:'M50 2 V8 A14 14 0 1 0 50 37 V38 A18 18 0 1 1 50 2 Z', 'class':'obj-status'}); this._label = doSVG('rect', {x:0, y:42, width:100, height:50, 'class':'obj-label'}); this._textObj = doSVG('text', {y:56, 'class':'obj-text'}); if (this._text != '') this.text(this._text); this._root.appendChild(this._tab); this._root.appendChild(this._body); this._root.appendChild(this._statusObj); this._root.appendChild(this._label); this._root.appendChild(this._textObj); return this._root; }; rtmObject.prototype.getRoot = function(){ return this._root; }; rtmObject.prototype.getTab = function(){ return this._tab; }; rtmObject.prototype.getBody = function(){ return this._body; }; rtmObject.prototype.status = function(status){ if (!status) { return this._status || console.error('objRTM.status: No status was set.'); } else if (typeof status != "string") { return console.error('objRTM.status: Status is "' + typeof status + '", but must be a "string".'); } this._status = status; this._root.setAttribute('data-status', this._status); var classarr = this._class.split(' '), found = false; for (i in classarr) { if (classarr[i].indexOf('ostat') != -1) { classarr[i] = 'ostat-' + this._status; found = true; } } if (!found) classarr.push('ostat-' + this._status); this._class = classarr.join(' '); if (this._root) this._root.setAttribute('class', this._class); }; rtmObject.prototype.text = function(text){ if (!text) return this._text; this._text = text; if (this._textObj) { if (this._textObj.hasChildNodes()) { var children = this._textObj.childNodes, len = children.length, i = len-1; for ( ; i >= 0; i--) { this._textObj.removeChild(children[i]); } } var spans = doTSpan(text, 15, 3); for (i in spans) { this._textObj.appendChild( spans[i] ); } this._textObj.setAttribute('title', text); } }; rtmObject.prototype.pos = function(x, y) { if (!x && !y) return {x:this._x, y:this._y}; if (!y) this._x = this._y = x; else { this._x = x; this._y = y; } this._root.setAttribute('transform', 'translate(' + this._x + ' ' + this._y + ')'); }; rtmObject.prototype.move = function(dx, dy) { if (!dx && !dy) return; else if (!dy) dy = dx; this._root.setAttribute('transform', 'translate(' + (this._x + dx) + ' ' + (this._y + dy) + ')'); }; // to specify functions for different parts of the object use this { tab:func1, body:func2, status:func3 } rtmObject.prototype.addEvent = function(enames, efuncs) { $(this._root).on(enames, function(e){ var tagName = e.target.tagName, className = e.target.getAttribute('class'); // label and text need special handling since every tspan is separate target if (className == 'obj-label' || tagName == 'tspan') { if (typeof efuncs.label != 'undefined') efuncs.label(); } else { switch (className) { case 'obj-tab': if (typeof efuncs.tab != 'undefined') efuncs.tab(); break; case 'obj-body': if (typeof efuncs.body != 'undefined') efuncs.body(); break; case 'obj-status': if (typeof efuncs.status != 'undefined') efuncs.status(); break; } } }); }; rtmObject.prototype.ondrag = function(classname, doOnDrag) { var that = this; this._dragging = this._ocx = this._ocy = false; if (typeof classname == 'function') { doOnDrag = classname; classname = ''; } if (typeof classname != 'string' || typeof doOnDrag == 'undefined') return; var eventObj = this._root, doc = $(document); switch (classname) { case 'obj-tab': eventObj = this._tab; break; case 'obj-body': eventObj = this._body; break; case 'obj-status': eventObj = this._status; break; case 'obj-label': eventObj = this._textObj; break; } $(eventObj).on('mousedown', function(e){ if (!that._dragging) { that._dragging = true; if (!that._ocx && !that._ocy) { that._ocx = e.pageX; that._ocy = e.pageY; } doc.on('mousemove', function(e){ doOnDrag(e); }); } }); $(eventObj).on('mouseup', function(){ if (that._dragging) { that._dragging = false; doc.off('mousemove'); } }); }; rtmObject.prototype.drag = function(){ var that = this; return function(e){ that.move(e.pageX - that._ocx, e.pageY - that._ocy); } }; return rtmObject;
};
/***********************************************************/
function drag(target) { return function(e){ target.move(e.pageX - target._ocx, e.pageY - target._ocy); }
}
var obj, obj2, test = $('#test');
$('#add').on('click', function(e){ var group = doSVG('svg'), j = 0, k = 0; for (var i=0; i < 300; i++) { console.time('adding objects'); var obj1 = new rtmObject(k*100, j*100); k++; if (k%20 == 0) k = 0; if (k%20 == 0) j++; obj1.status((i % 2 == 0) ? 'up' : 'down'); obj1.text(i + ' The Quick Brown Fox Jumped Over the lazy dog and then Ate the Wizard!'); group.appendChild( obj1.draw() ); obj1.addEvent('click', { status:function(){ console.log('!! ', this); obj1.status('down'); } }); /* obj1.addEvent('click', { status:(function(target){ return function(){ target.status('down'); } })(obj1) }); */ /* obj1.ondrag(function(e){ obj1.move(e.pageX - obj1._ocx, e.pageY - obj1._ocy); }); obj1.ondrag( (function(target){ return function(e){ target.move(e.pageX - target._ocx, e.pageY - target._ocy); } })(obj1) ); */ obj1.ondrag(obj1.drag()); console.timeEnd('adding objects'); } test.append( group );
});
$('#statusUp').on('click', function(e){ obj.status('up');
});
$('#statusDown').on('click', function(e){ obj.status('down');
});
$('#statusProblem').on('click', function(e){ obj.status('problem');
});
$('#add2').on('click', function(e){ console.log(this); //console.profile(); obj2 = new rtmObject(200);	test.append( obj2.draw() ); //console.profileEnd(); obj2.status('down'); obj2.ondrag(function(e){ obj2.move(e.pageX - obj2.getClickX(), e.pageY - obj2.getClickY()); });
});
$('#addText').on('click', function(e){ obj.text('The Quick Brown Fox Jumped Over The Lazy Dog and then Ate the Wizard!');
});
$('#changePos').on('click', function(e){ obj2.pos(10, 20);
});
$('#move').on('click', function(e){ obj2.move(5, 3);
});
Dynamic SVG creation - Script Codes
Dynamic SVG creation - Script Codes
Home Page Home
Developer Ilia
Username iliadraznin
Uploaded August 04, 2022
Rating 3
Size 5,075 Kb
Views 30,360
Do you need developer help for Dynamic SVG creation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ilia (iliadraznin) Script Codes
Name
Reproducing content box from RSI
Canvas drawing app
A Pen by Ilia
Map Controls
CSS3 Working Clock
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!