SVG mit Tooltip funktioniert nicht

[castafiore]

Liebe Contaos,

für eine interaktive Landkarte versuche ich, ein SVG mit Tooltip-Funktion zu bauen.

Als "normale" - nicht in Contao erstellte - HTML-Seite funktioniert das auch, aber wenn ich den Code in Contao einfüge, erscheint gar nichts.

Hier ein einfacher Beispielcode:

<svg>

  <style>
    .tooltip{
	font-size: 12px;
    }
    .tooltip_bg{
	fill: white;
	stroke: black;
	stroke-width: 1;
	opacity: 0.85;
    }
  </style>

  <script>
    <![CDATA[

	function init(evt)
	{
	    if ( window.svgDocument == null )
	    {
		svgDocument = evt.target.ownerDocument;
	    }

	    tooltip = svgDocument.getElementById('tooltip');
	    tooltip_bg = svgDocument.getElementById('tooltip_bg');

	}

	function ShowTooltip(evt, mouseovertext)
	{
	    tooltip.setAttributeNS(null,"x",evt.clientX+11);
	    tooltip.setAttributeNS(null,"y",evt.clientY+27);
	    tooltip.firstChild.data = mouseovertext;
	    tooltip.setAttributeNS(null,"visibility","visible");

	    length = tooltip.getComputedTextLength();
	    tooltip_bg.setAttributeNS(null,"width",length+8);
	    tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
	    tooltip_bg.setAttributeNS(null,"y",evt.clientY+14);
	    tooltip_bg.setAttributeNS(null,"visibility","visibile");
	}

	function HideTooltip(evt)
	{
	    tooltip.setAttributeNS(null,"visibility","hidden");
	    tooltip_bg.setAttributeNS(null,"visibility","hidden");
	}

    ]]>
  </script>

  <rect id="rect1" x="10" y="10" width="50" height="50" fill="red"
   onmousemove="ShowTooltip(evt, 'Ich bin ein Tooltip')"
    onmouseout="HideTooltip(evt)"/>

  <rect class="tooltip_bg" id="tooltip_bg"
      x="0" y="0" rx="4" ry="4"
      width="55" height="17" visibility="hidden"/>
  <text class="tooltip" id="tooltip"
      x="0" y="0" visibility="hidden">Tooltip</text>
</svg>

Weiß jemand, was ich falsch mache? Ach ja, die notwendigen Tags sind alle eingetragen....

Danke für eure Hinweise
Sigrun

[Flex]

HTML Modul? HTML Content Element?

Stimmt der HTML Output noch oder werden da eventuell Sachen gekürzt?

[castafiore]

Hallo Flex,

beides versucht, als Modul und "eigenes HTML". Gekürzt wird nix.
S.

[stefan-at-work]

hast Du denn den svg-Tag auch in den Einstellungen unter "untertstützte Bildformate" eingetragen?

[castafiore]

Hallo Stefan,

Ja, svg ist als Bildformat eingetragen. Ist sowieso Standard bei Version 3.4.4
Ein SVG als solches macht auch keine Probleme, nur in Verbindung mit dem Javascript, das aber, wie gesagt, in einem anderen HTML-Dokument funktioniert.

Aber insgesamt scheint es mit dem SVG-Format zu hapern. Auch z. B. Filtereffekte für einen Drop-Shadow werden nur von Firefox dargestellt, während Opera, Chrome und Safari das nur bei Nicht-Contao-HTML5-Dokumenten können.
Kann aber natürlich sein, dass ich nur irgendetwas nicht richtig verstehe. Hat noch jemand eine Idee?

[castafiore]

Falls es noch jemanden interessiert:
Das direkte Einbinden einer SVG-Datei mit integriertem Javascript funktioniert bei mir nach wie vor nicht. Da der ausgegebene Code identisch ist mit dem in einer "normalen" HTML-Datei, nehme ich an, dass das Javascript von Contao und das in SVG integrierte Javascript sich irgendwie beißen.
Ein funktionierender Workaround: eine Datei mit dem SVG über <iframe> einbinden, und voilà: die Tooltips funktionieren.
Grüße S.

[bongartz120]

Hallo,

also bei mir läuft es nur, wenn ich bei erlaubten HTML Tags folgende weitere: "<svg><path>".

habe es jedoch nicht mit JS probiert.