SVG im TWebBrowser manipulieren

[AEngel77]

Hallo zusammen,

ich möchte ein SVG im TWebBrowser laden und manipulieren,

1. Laden und anzeigen - geht
2. Manipulieren von Attributen - geht

3. Hinzufügen neuer Objekte - geht nicht

Ich erzeuge mir mit

doc.createElementNS(NS, 'rect');

ein Rechteck, weise Größe etc. per Attribut zu, ermittle mir dann ein bestehendes Objekt und ersetze es mit

parentNodeNode.replaceChild(newHtmlNode, oldHtmlNode); (Habe auch schon insertBefore ausprobiert, ändert nichts am eigentlichen Problem)

Ergebnis: Das alte Objekt verschwindet, das neue wird jedoch nicht angezeigt. Wenn ich den Browser veranlasse, das aktuelle SVG zu speichern und anschließend dieses neu lade, wird das Rechteck korrekt angezeigt.

"Irgendwie" registriert der Browser nicht, dass dort ein neues Objekt existiert und dieses gezeichnet werden muss.

Vielen Dank für jede Idee!

André Engelshove

[puderle]

Du musst Bezug auf das Parent-Element nehmen und das alte Child löschen und ersetzen.

Einfach nur ersetzen reicht scheinbar nicht.

http://www.selfsvg.info/?section=10.5#listing_10-17

ist ein JavaScript-Listing was vielleicht einiges klärt. Auszug aus dem Text ein paar Zeilen darüber:


[...] Hierfür gibt es die zwei Methoden removeChild() und replaceChild(). Als Parameter erhält die Methode removeChild() eine Referenz auf den zu löschenden Knoten. replaceChild() hingegen besitzt zwei Parameter, von denen der erste auch eine Referenz auf den zu löschenden Knoten und der zweite eine Referenz auf einen neuen Knoten beinhaltet. >>>> Damit diese Methoden angewendet werden können, muß das Vaterelement des zu löschenden oder zu ersetzenden Knotens bekannt sein. Die Eigenschaft parentNode eines Knotens liefert dessen Vaterknoten."

var oldChild = document.getElementById("sbX1");
var newChild = document.createElement("div");
newChild.id= "sbYY1";

// Replace oldchild on the parent node
// You can reference the child's parent via .parentNode
// or retrieve it directly with document.getElementById('theparentId')
oldchild.parentNode.replaceChild(newChild, oldChild);

[AEngel77]

Hi,

also, z.Zt. rufe ich folgende Funktion auf: (SvgDoc = ISVGDocument)

Delphi-Quellcode:

  procedure MakeTextBox(textElement: ISvgTextContentElement);
  var
    doc: IHTMLDocument7;
    newHtmlElement: IHTMLElement;
    parentNode: IHTMLElement;
    parentNodeNode: IHTMLDOMNode;
    oldHtmlNode: IHTMLDOMNode;
    newHtmlNode: IHTMLDOMNode;
    textHtmlElement: IHtmlElement;
  begin
    SvgDoc.QueryInterface(IID_IHTMLDocument7, doc);
    NS := 'http://www.w3.org/2000/svg';

    newHtmlElement := doc.createElementNS(NS, 'rect');

    setAttributeNS(newHtmlElement, cSVGstroke, ColorToSvgColor(clBlue));
    setAttributeNS(newHtmlElement, cSVGfill, ColorToSvgColor(clBlue));
    setAttributeNS(newHtmlElement, 'x', 10);
    setAttributeNS(newHtmlElement, 'y', 10);
    setAttributeNS(newHtmlElement, 'width', 50);
    setAttributeNS(newHtmlElement, 'height', 50);

    newHtmlElement.QueryInterface(IID_IHTMLDOMNode, newHtmlNode);

    textElement.QueryInterface(IID_IHTMLElement, textHtmlElement);

    parentNode := textHtmlElement.parentElement;
    parentNode.QueryInterface(IID_IHTMLDOMNode, parentNodeNode);
    textElement.QueryInterface(IID_IHTMLDOMNode, oldHtmlNode);

//    parentNodeNode.removeChild(oldHtmlNode);
//    parentNodeNode.appendChild(newHtmlNode);

//    parentNodeNode.insertBefore(newHtmlNode, oldHtmlNode);

    newHtmlNode := parentNodeNode.replaceChild(newHtmlNode, oldHtmlNode);
end;

Die Erzeugung per Javascript hatte ich auch schon gefunden / ausprobiert - das geht. Nur aus Delphi bekomme ich es nicht hin. Wobei er es ja scheinbar richtig einfügt, wie gesagt, speichern und neuladen, dann ist alles wie es sein soll - nur für mich keine Lösung

Danke!