SVG-Tool für Grafik- und Design

SVG-Elemente draggable Motivation/Einführung

Das folgende Beispiel kann als motivierender Einstieg dienen. Mit Hilfe von ECMAScript können SVG-Elemente erzeugt werden. Mit Hilfe von "Drag and Drop" können Elemente mit der Maus positioniert werden. Plagiate und fremde Bibliotheken sind out. Als Basis für das zu erstellende selfmade-Toolchen dienen W3C-SVG, W3C-HTML und von ECMAScript ( non-poprietär ).

Das ECMAScript-Objekt vg ( vg = [V]ektor-[G]rafik, siehe Quelltext ) nimmt als Bibliothek die selbst erstellten Funktionen auf. Z.B. zeigt vg.el2top(el) das ausgewählte Objekt im Vordergrund an. Jedes SVG-Element, das mit der Maus positioniert werden kann, erhält die Attribute transform="matrix(a b c d e f) und onmousedown="vg.draggable(evt)" und mit dem Style .draggable {cursor: move;} bekommt der Maus-Cursor das "moveing-Icon".

Bitte Kreis oder ein Rechteck an einen anderen Ort ziehen und auch mal shiftKey/ctrlKey halten.

Anzeige: SVG-Quelltext SVG-Vorschau

id="TA0"

Hinweise zu Maus-Events

Die testanzeige_von_event_daten() zeigt wesentliche Maus-Daten, die ein ausgelöster Maus-Event "mitbring". Zu einen Event gehören evt.eventPhase ( CAPTURING_PHASE = 1; AT_TARGET = 2; BUBBLING_PHASE = 3 ), event.type, event.target und stopPropagation() und preventDefault().

Achtung! Eine HTML-Seite kann Scrollbalken und "nested -Tags" haben. Die Maus-Position (x,y) berechnet sich dann etwa:

document.onmousemove = function(ev) {var html, body, win = window, doc = win.document;
  ev = ev || win.event;
  if (ev.pageX == null && ev.clientX != null ) {
    html = doc.documentElement;
    body = doc.body;
    ev.pageX = e.clientX + (html.scrollLeft||body && body.scrollLeft ||0)-(html.clientLeft||0);
    ev.pageY = e.clientY + (html.scrollTop ||body && body.scrollTop  ||0)-(html.clientTop ||0);
  } return {x:ev.pageX,y:ev.pageY};
};

Hinweise zur Toolchen-Erstellung mit doc.createElementNS()

Wie kann mit ECMAScript ein SVG-Bild kreiert/manipuliert werden? Gegeben seien SVG-ECMAScript-Elemente wie z.B.

var el = { tag_name:"svg",        //Idee: JS-Element-Objekte vorgeben wie etwa
           id:"my_svg"
           width:"600",           // auch richtig ist  width:600,
           height:"250",          // auch richtig ist  height:250,
           style:"border:1px solid blue",
           xmlns:svg_ns 
           version:"1.1" 
          "xmlns:xlink",xlink_ns // bei key-Schreibweise " beachten!
        };

Wie kann mit ECMAScript ein SVG-Bild kreiert/manipuliert werden? Achtung! Hier kommen lediglich UNGEPRÜFTE Hinweise:

var win      = window, // alles UNGEPRÜFT!
    doc      = win.document,
    svg_ns   = "http://www.w3.org/2000/svg",
    xlink_ns = "http://www.w3.org/1999/xlink";

function build_svg_ele(o) { var i, ele =null, keys = Object.keys(o);
if(o) {
    if(!o.tag_name||o.tag_name !== keys[0]){ alert("ERR:build_svg_ele(o.tag_name="+keys[0]);return; }
    if(!o.svg_ns){o.svg_ns = svg_ns;}
    if(!o.xlink_ns) { o.xlink_ns = xlink_ns; }
}
for( i = 0; i < keys.length; i += 1 ) { key = keys[i];
  if(i===0){ ele = doc.createElementNS(svgNS, "svg"); } else { ele.setAttributeNS(svgNS,key,o[key]); }
  return ele;
}

Hinweise zur Toolchen-Erstellung mit doc.createElementNS()

Wie kann function build_svg_mit_allen_ele_zusammen( ???) { ...} entwickelt werden? Wie wird die hirachische Struktur beim Zusammenbau berücksichtigt? Grobe Hinweise:

// Tip für das schachteln der erstellten Elemente:
p = doc.createElement('p'); 
p.setAttribute('align', 'center'); 
p.appendChild(doc.createElement('br'));

a = doc.createElement('a'); 
a.setAttribute('target', '_blank'); 
a.setAttribute('title', 'W3C-online-Validator');
a.setAttribute('href', w3c_url); 
a.appendChild(doc.createTextNode(str));
pre = doc.createElement('pre'); 
pre.appendChild(a);
p.appendChild(pre); 
doc.body.appendChild(p);

// Tip für das Erstellen einer komplexen Element-Liste:
function get_node_list(selektoren_str, parent_ele) { 
 return (parent_ele || doc).querySelectorAll(selektoren_str || "*"); 
}

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr