wie erreicht man ein Div in foreignObjekt

[effel]

Hallo Freunde,

mein svg steht mit polyline - keine Probleme. ich habe in svg dann ein foreignObjekt gelegt und darin ein div. funktioniert auch

Jetzt will ich das div erreichen - Schwierig!

1. das funktioniert: alert(document.getElementsByTagName("div").length)
   das nicht:
   alert(document.getElementsByTagName("div")[9].tagname) alert(document.getElementsByTagName("div")[9].nodename)

2 dann mit id: das funktioniert: alert(document.getElementById("dp9").outerHTML)
alert(document.getElementById("dp9").innerText)
hat nicht: alert(document.getElementById("dp9").getAttribute("visibility")) das div hat:<div... visibility:visible>

damit brach alles zusammen: document.getElementById("dp9").setAttribute("visibility","hidden"))

Vielleicht weiß jemand Rat.

mit Gruß Effel

[Matthias Scharwies]

Servus!

Hallo Freunde,

mein svg steht mit polyline - keine Probleme. ich habe in svg dann ein foreignObjekt gelegt und darin ein div. funktioniert auch

Jetzt will ich das div erreichen - Schwierig!

    const svg = document.querySelector('svg');
    const foreignObject = svg.querySelector('foreignObject');
    const firstDiv = foreignObject.querySelector('div'); 

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo effel,

alert(document.getElementsByTagName("div")[9].tagname)
alert(document.getElementsByTagName("div")[9].nodename)

alert(document.getElementsByTagName("div")[9].tagName)
alert(document.getElementsByTagName("div")[9].nodeName)

JavaScript ist genauso case-sensitive wie SVG.

alert(document.getElementById("dp9").getAttribute("visibility")) 

visibility ist eine CSS-Eigenschaft, kein HTML Attribut.

alert(document.getElementById("dp9").style.visibility)

Warum ist .style.visibility auch rot? Weil ich weder in Firefox noch in Chrome ein style-Property vorfinde, wenn ich ein div in einem foreignObject im Zugriff habe. Das style-Attribut wird ebenfalls ignoriert.

In Firefox kann man immerhin eine class setzen und im Stylesheet darauf Bezug nehmen. Chrome ignoriert auch das class-Attribut.

Nach einem längeren Diskurs mit der Websuche und dann auch einer AI scheint das kein Bug, sondern Absicht zu sein. HTML-Elemente in foreignElement sind offenbar deutlich eingeschränkt.

Spinne ich oder hat ChatGPT da mal nicht halluziniert?

Rolf

[Matthias Scharwies]

Guten Morgen,

ich habe mir unser Wiki angeguckt.

Zu foreignObject fand ich dies: HTML in SVG, was aber nicht prominent verlinkt ist.

Dieses Tutorial behandelt SVG und JavaScript

Dort geht es ja unter anderem drum, dass Beispiele aus der Frühzeit von SVG z. B. mouseover-Effekte bei Buttons und Navigationen in SVG mit JavaScript realisiert hatten. Deshalb die Empfehlung:

1. Sollte man jetzt hier einen Abschnitt zu HTML in SVG einfügen, um eine mit foereignObject eingefügte Linkliste oder mehrzeiligen Text^[1] (Beides geht in SVG nicht so gut wie in HTML) mit JS zu bearbeiten? Was wäre der Use Case?

2. Hat jemand Anwendungsbeispiele, bei denen man externe SVGs mit JavaScript bearbeitet?
   @Jürgen B Da passt ja dein Tutorial zu Leaflet ganz gut, oder?

Herzliche Grüße

Matthias Scharwies

---

1. Ein div ist doch wie ein rect - man sollte für ein Beispiel Elemente nehmen, deren Standardverhalten man in SVG erst nachbauen müsste. ↩︎