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. ↩︎

[JürgenB]

Hallo Matthias,

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?

mit Leaflet werden nur png-Bilder positioniert und SVGs erzeugt, aber nicht bearbeitet.

Im Grafik-Objekt des Funktionsplotters wird per Javascript ein SVG erzeugt.

Nur im SVG-Zoom wird per Javascript der Viewport eines externen SVGs verändert.

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Matthias,

Vielen Dank!

Nur im SVG-Zoom wird per Javascript der Viewport eines externen SVGs verändert.

Das schau' ich mir heut' Abend mal genauer an!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich habe mir im Testwiki (weil da Frickl2 ist) mal das Test.svg ins Frickl geladen und dort das foreignObject aus SVG/Element/foreignObject reingezogen.

Es wird nicht angezeigt. Erst, wenn ich das requiredExtensions Attribut rauslösche, kommt es. Das scheint nicht nur unnötig, sondern sogar kontraproduktiv zu sein. Wo kommt das her?

Und ich habe dort dann auch versucht, ob ein Chromium-Browser (Edge diesmal) ein style-Attribut akzeptiert. Es steht zwar im DOM, ein class-Attribut steht auch im DOM, ich kann style-Attribut und class über querySelector auch nutzen, aber die Stile werden nicht angewendet.

In diesem Beispiel bleibt das div rot. DIESE Stylerule greift. Von der Spezifität her müsste das style-Attribut höchsten Rang haben, gefolgt von div.foo. Das div sollte also blau oder grün sein. Nö. Nicht in Chromia. In Firefox wird es grün, wenn ich mich recht erinnere (bin jetzt im ERGO Netz, nicht zu Hause, da hab ich keinen FF).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" width="300">
<style>
  div {
    color:red;
  }
  div.foo {
    color:green;
  }

</style>

  <foreignObject x="40" y="40" width="100" height="100">
    <body xmlns="https://www.w3.org/1999/xhtml">
      <div class="foo" style="color:blue;">
        Inhalt
      </div>
    </body>
  </foreignObject>
</svg>

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

ich habe mir im Testwiki (weil da Frickl2 ist) mal das Test.svg ins Frickl geladen und dort das foreignObject aus SVG/Element/foreignObject reingezogen.

Es wird nicht angezeigt. Erst, wenn ich das requiredExtensions Attribut rauslösche, kommt es. Das scheint nicht nur unnötig, sondern sogar kontraproduktiv zu sein. Wo kommt das her?

Aus XML. Dort musste man eine Namensraumangabe im svg-Element haben und eben so ein requiredExtensions-Attribut mit Sprachangabe machen, wenn du andere Sachen verwenden willst.

Das war das Code-Beispiel von 2015:

<switch>
<!-- Abspielen eines Sounds und Anzeige eines Textes -->
<!-- wenn die Hyperlink-Erweitungen des Adobe SVG Viewers unterstützt werden -->
  <g requiredExtensions="http://www.adobe.com/svg10-extensions">
    <a:audio xlink:href="sound64.mp3" begin="0" volume="10" repeatCount="indefinite" />
    <text x="100" y="60" text-anchor="middle">Sound in SVG</text>
  </g>

<!-- Nur Anzeige eines Textes, im Sonst-Fall -->
  <g>
    <text x="100" y="60" text-anchor="middle">kein Sound</text>
  </g>
</switch>

Mittlerweile (in SVG2) ist das Attribut obsolet.

Das Beispiel im Abschnitt SVG/Tutorials/Text/mehrzeiliger_Text#HTML_in_SVG funktioniert mit requiredExtensions-Attribut sowohl im FF131 als auch im aktuellen Edge.

Und ich habe dort dann auch versucht, ob ein Chromium-Browser (Edge diesmal) ein style-Attribut akzeptiert. Es steht zwar im DOM, ein class-Attribut steht auch im DOM, ich kann style-Attribut und class über querySelector auch nutzen, aber die Stile werden nicht angewendet.

In diesem Beispiel bleibt das div rot. DIESE Stylerule greift. Von der Spezifität her müsste das style-Attribut höchsten Rang haben, gefolgt von div.foo. Das div sollte also blau oder grün sein. Nö. Nicht in Chromia. In Firefox wird es grün, wenn ich mich recht erinnere (bin jetzt im ERGO Netz, nicht zu Hause, da hab ich keinen FF).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" width="300">
<style>
  div {
    color:red;
  }
  div.foo {
    color:green;
  }

</style>

  <foreignObject x="40" y="40" width="100" height="100">
    <body xmlns="https://www.w3.org/1999/xhtml">
      <div class="foo" style="color:blue;">
        Inhalt
      </div>
    </body>
  </foreignObject>
</svg>

Das schau ich mir später in Ruhe an!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Das Beispiel im Abschnitt SVG/Tutorials/Text/mehrzeiliger_Text#HTML_in_SVG funktioniert mit requiredExtensions-Attribut sowohl im FF131 als auch im aktuellen Edge.

Das ist aber auch nicht repräsentativ, denn das ist HTML in SVG in HTML. Darauf wird im Artikel aber nicht hingewiesen, das scheinst Du da als gegeben vorauszusetzen. Im SVG-Artikelraum sollte man aber auch immer berücksichtigen, dass ein Standalone SVG gebaut wird. Deshalb bitte das Casing beachten, auch wenn es bei HTML-Einbettung wurscht ist: im Beispiel-Source und im Artikel steht foreignobject. Im Testwiki war der BeispielSource gefixt, der redaktionelle Text nicht.

Ich habe das Hauptwiki berichtigt, im Text und im Beispiel.

Und ich habe - im Testwiki natürlich - einmal die Standalone-Version des Beispiels erstellt. Komischerweise funktioniert dort eine style-Angabe!? Keine Ahnung, wann das geht und wann nicht.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Das Beispiel im Abschnitt SVG/Tutorials/Text/mehrzeiliger_Text#HTML_in_SVG funktioniert mit requiredExtensions-Attribut sowohl im FF131 als auch im aktuellen Edge.

Das ist aber auch nicht repräsentativ, denn das ist HTML in SVG in HTML. Darauf wird im Artikel aber nicht hingewiesen, das scheinst Du da als gegeben vorauszusetzen. Im SVG-Artikelraum sollte man aber auch immer berücksichtigen, dass ein Standalone SVG gebaut wird. Deshalb bitte das Casing beachten, auch wenn es bei HTML-Einbettung wurscht ist: im Beispiel-Source und im Artikel steht foreignobject.

Mist - das ist mir durchgerutscht! Danke!

Im Testwiki war der BeispielSource gefixt, der redaktionelle Text nicht.

Ich habe das Hauptwiki berichtigt, im Text und im Beispiel.

Und ich habe - im Testwiki natürlich - einmal die Standalone-Version des Beispiels erstellt. Komischerweise funktioniert dort eine style-Angabe!? Keine Ahnung, wann das geht und wann nicht.

Rolf

Herzliche Grüße

Matthias Scharwies