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

[Gunnar Bittersmann]

@@Matthias Scharwies

Jetzt will ich das div erreichen - Schwierig!

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

Das sollte dasselbe tun:

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

Vermutlich braucht man das foreignObject gar nicht im Selektor:

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

Kwakoni Yiquan

[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.

[EDIT] HTML in SVG findet sich jetzt hier:
MathML/Geometrie_mit_MathML, SVG und JavaScript#foreignObject
[/EDIT]

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 foreignObject 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.

[EDIT] HTML in SVG findet sich jetzt hier:
MathML/Geometrie_mit_MathML, SVG und JavaScript#foreignObject

Ich habe das obsolete requiredExtensions-Attribut aber entfernt. [/EDIT]

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

[Matthias Scharwies]

Guten Morgen,

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.

Ja, da hat die Macht des Faktischen zugeschlagen: 2015 gingen

• SVG-Standalone-Dokumente nur als Bild-Datei ins Wki!
  Mit der Einschränkung, dass da dann kein Script (bäh) oder SMIL (schade) drin sein durfte.
  Dieses Beispiel (HTML/Tutorials/Aktive_Inhalte_einbinden#object) ging nur, weil dedlfix die Datei manuell hochlud (https://wiki.selfhtml.org/local/Kaleidoskop.svg)
• Frickl-Beispiele nur als HTML-Webseiten, nicht als Standalone-SVG^[1]

Im SVG-Artikelraum sollte man aber auch immer berücksichtigen, dass ein Standalone SVG gebaut wird. Deshalb bitte das Casing beachten,

Das wäre eine große Aufgabe, wenn das Frickl2 fertig ist:

Welche "SVG in HTML5"-Beispielen sollen in Standalone-SVGs umgewandelt werden?

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.

Ich habe das mittlerweile dort entfernt, da es ja in einem obsoleten Teil zu nicht implementiertem mehrzeiligen Text vorkam. Stattdessen habe ich alles, was wir hier diskutiert haben, in diesem - schon vorhandenen - Abschnitt fließen lassen:

• MathML/Geometrie_mit_MathML,_SVG_und_JavaScript#foreignObject

Herzliche Grüße

Matthias Scharwies

---

1. Man kann sie hochladen, dann werden sie aber nicht gerendert: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Arbeitslose-Deutschland.svg
   Ihr wisst ja gar nicht, wie ich mich auf das neue Frickl2 freue! ↩︎

[JürgenB]

Hallo Matthias,

Dieses Tutorial behandelt SVG und JavaScript

ich hab zu diesem Thema mal etwas gebastelt:

Mit Javascript auf eine externe SVG zugreifen

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Matthias,

Dieses Tutorial behandelt SVG und JavaScript

ich hab zu diesem Thema mal etwas gebastelt:

Mit Javascript auf eine externe SVG zugreifen

Vielen Dank!

Zur Karte: Ich hatte sie ja von Wikimedia Commons übernommen und 2016 mit dem SVG-Optimizer verschlimmbessert. Ich habe grad das Original von Wikimedia Commons genommen und hier hochgeladen:

Datei:Deutschland-Karte.svg

Die Umrechnung in Farbtöne sieht interessant aus. Die Farbpalette vom Color-Brewer wolltest du nicht übernehmen? 😀 Ich wollte auch schon mit oklch() experimentieren, würde aber YlOrBr&n=9oder daneben YlorRd nehmen. Was meint ihr?

Ich würde auch eine Legende beifügen, wobei meine Klassennamen .class1, .class2,… eher suboptimal sind.

Sollte man bei :hover auf ein Bundesland den Datensatz highlighten und/oder einen Tooltip über das Land einblenden?

---

Zum Wiki-Artikel:

Soll ich Bsp. 4 mit den Arbeitslosen 2016 noch aktualisieren? (aria; custom properties, aktuelle Daten) Entweder Bsp. 4 in die Tonne treten und jetzt gleich ein Bsp. mit DOM-Scripting machen.

[EDIT] Grad beschlossen: Bsp. wird eine Infografik mit Vergleich 2016 / 2020 / 2024 - eigentlich sollte es ein Standalone-SVG werden, jetzt wohl doch als 'Inline-SVG in einer Webseite. [/EDIT]

---

Kommt dein Beispiel hier hin oder ins DOM-Scripting-Tutorial?

Schlusswort ist dieses:

„Im realen Einsatz empfiehlt es sich, die interaktive Karte als SVG-Dokument (→ Einzelansicht) in einem [[object]]-Element einzubinden, da ältere Versionen des Internet-Explorer die inline SVG-Grafik in der Standardgröße von 300x150px darstellen. Leider ist ein solches Beispiel mit der Mediawiki-Software (noch) nicht möglich.“

Wär gut, wenn das mal weg käme.

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

Sollte man bei :hover auf ein Bundesland den Datensatz highlighten und/oder einen Tooltip über das Land einblenden?

mein Smartphone möchte wissen, was :hover ist und ich frage mich, wonach die Länder sortiert sind...

Gruß
Kalk

[JürgenB]

Hallo,

… und ich frage mich, wonach die Länder sortiert sind...

grob von oben nach unten.

Gruß
Jürgen

[Tabellenkalk]

Hallo,

grob von oben nach unten.

du meinst von unten nach oben? Bayern liegt sehr viel höher als Schleswigholstein...
scnr

Gruß
Kalk

[Matthias Scharwies]

Guten Abend,

Ein Zwischenergebnis:

• Deutschland_-_Karte_und_Statistik
  • Beispiel:SVG-Landkarten.html

Die Webseite hat eine Datentabelle. Ein Script zieht die Zahlen raus und sortiert sie. Entsprechend wird die externe Grafik mit Klassen eingefärbt.

Zur Karte: Ich hatte sie ja von Wikimedia Commons übernommen und 2016 mit dem SVG-Optimizer verschlimmbessert. Ich habe grad das Original von Wikimedia Commons genommen und hier hochgeladen:

Datei:Deutschland-Karte.svg

Die ist auch nicht ganz perfekt. Wenn man sie groß zoomt, sieht man, dass manche Grenzen nicht aufeinanderliegen. Für den :hover-Effekt mit breiteren strokes müsste man das jeweilige Land nach vorne holen (z-index war mal für SVG2 geplant, wurde aufgegeben) - bei Bayern seht ihr, dass BW drüberliegt.

---

Ursprünglich sah's ja mal so aus, aber alles mit Magic Numbers per Hand kodiert:

Ich würde jetzt das (intern vorhandene) Ranking nutzen, um pro Datensatz einen Balken mit Prozentwert und den Namen des Bundeslands auszuspucken.

Dazu einige Fragen:

• 3 Buttons [2016] [2020] [2024] oder einen input type range?
• Balkendiagramm in (neues) Inline-SVG oder in die Karte (die müsste dann eine andere ViewBox erhalten
  • evtl. andere order: Balkendiagramm: 1; Karte: 2, und die Tabelle auf 3 nach unten
• Hover kann man ja nicht per JS nutzen, um von der Karte aus den Balken des betreffenden Bundeslandes zu highlighten, oder? Aber mit :focus - sollte man das tun?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Datei:Deutschland-Karte.svg

Die ist auch nicht ganz perfekt. Wenn man sie groß zoomt, sieht man, dass manche Grenzen nicht aufeinanderliegen.

Wer macht denn so einen Mist – und sich doppelte Arbeit?

Wenn man einmal den Pfad für ein Land hat, kann (lies: sollte) man das Stück der gemeinsamen Grenze für das Nachbarland wiederverwenden.

Kwakoni Yiquan

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Datei:Deutschland-Karte.svg

Die ist auch nicht ganz perfekt. Wenn man sie groß zoomt, sieht man, dass manche Grenzen nicht aufeinanderliegen.

Wer macht denn so einen Mist – und sich doppelte Arbeit?

Ein Signore Liuzzo anno 2006

(commons.wikimedia.org/wiki/File:Karte_Bundesrepublik_Deutschland.svg)

Wenn man einmal den Pfad für ein Land hat, kann (lies: sollte) man das Stück der gemeinsamen Grenze für das Nachbarland wiederverwenden.

Ja, ich stimme dir zu, habe hier aber nix Besseres gefunden:

Category:SVG_maps_showing_16_states_of_Germany

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

sieht nur auf den ersten Blick besser aus:

aber nur 27.4KB

[EDIT] Wenn ihr das Bild anklickt, könnt ihr die :hover-Effekte ausprobieren. [/EDIT]

Evtl. sollte man auf den stroke verzichten:

.land:hover {
			filter:brightness(1.1);
			}

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo JürgenB,

sitze gerade vor dem Firmenlaptop, weil wir Release machen. Der Aufruf von test.berkemeier.eu liefert:

Die Zertifikatverifizierung ist in der Regel 'Block Self Signed Certificates' fehlgeschlagen.

Sprich: Unser Gateway blockt HTTPS mit selbstsignierten Zertifikaten. Andere Besucher bekommen vermutlich einen Zertifikatfehler beim Seitenabruf.

Ups. Gilt für www.berkemeier.eu ebenso?

Rolf

[JürgenB]

Hallo Rolf,

ich bekomme nur ein Zertifikat, weitere sind teuer. Kannst du die Testseite mit http aufrufen?

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

ja, kann ich.

Rolf

[effel]

Hallo,

ich bin voll zufrieden und es läuft. Bedanke mich bei allen. Noch einige Fragen: querySelector - ich habe mehere Divs in foreignObject in node werden PrgrammFehler sehr gut angegen. Gibt es das auch browser-Javascript?

<SCRIPT language="JavaScript" type="text/javascript">
function ereignis(){
var zk
var pl,plobj,iddiv1,iddiv2
plobj=this
plobj.style.strokeWidth = "10";
pl=this.id
iddiv1="dp"+(pl.substring(1)*2)
iddiv2="dp"+(pl.substring(1)*2+1)
document.getElementById(iddiv1).style.visibility="visible"
document.getElementById(iddiv2).style.visibility="visible"
	}
function m_over(){
var z0;z0=0;
while(z0<document.getElementsByTagName("polyline").length){
document.getElementsByTagName("polyline")[z0].addEventListener("click",ereignis);
z0++; }
   }
m_over();
</SCRIPT>

mit freundl.Gruß Effel

[Matthias Scharwies]

Servus!

Hallo,

in node werden PrgrammFehler sehr gut angegen.

Gibt es das auch browser-Javascript?

Evtl. mit [F12] und der Console_API?

Herzliche Grüße

Matthias Scharwies