Inline SVG im HTML Inhaltselement

[denfin]

Hallo zusammen!

Kurz vorweg: Ich habe bisher immer nur Websites in Contao befüllt. Seit kurzem benutze ich Contao auch um Websites selber aufzusetzen.

Momentan arbeite ich an einem Projekt, wo ich Inline SVGs benutzen möchte. Das hat den einfachen Grund, damit ich die einzelnen Elemente per Klasse oder ID ansprechen und somit animieren kann. Wenn ich also ein neues Inhaltselement erstelle, HTML auswähle, und meinen SVG Code reinkopiere, funktioniert das leider gar nicht. Habe auch schon überprüft obt es funktioniert wenn man diesen XML Tag rausnimmt, aber auch dann wird mir im Frontend nichts angezeigt.

Wenn man sich das ganze im Inspektor anschaut, sieht es so aus, als würde der SVG-Code auskommentiert werden. Habe auch schon überprüft ob SVG als unterstütztes Bildformat angegeben ist. Siehe Screenshots.

Hat irgendwer Erfahrung damit gemacht und kennt eine Lösung?



Bildschirmfoto 2016-08-05 um 16.13.14.png
Bildschirmfoto 2016-08-05 um 16.15.26.png
Bildschirmfoto 2016-08-05 um 16.15.43.png

[folkfreund]

Hallo denfin, zuerst willkommen im Forum!

Wenn ich es richtig verstanden habe, dann legst du ein Inhaltselement vom Typ "HTML" an und trägst unter "HTML-Code" etwas ein wie

<SVG>
...
</SVG>

Das hat dann nichts mit den unterstützten Dateiformaten zu tun (es handelt sich ja nicht um eine Datei).
In den Einstellungen der Seite sind unter "Sicherheitseinstellungen | Erlaubte HTML-Tags" die Tags aufgeführt, die in HTML-Inhaltelementen erlaubt sind. Alles andere wird entfernt.

Versuch doch mal, das SVG-Tag dort zu ergänzen. Ob das dann aber reicht, kann ich dir nicht sagen.

Gruß, folkfreund

[mlweb]

Soweit ich mich erinnere reicht nur <svg> nicht. Die anderen enthaltenen Tags müssen auch freigegeben sein.

[denfin]

Guten Morgen,

erstmal vielen Dank für Eure Antworten. Das mit den erlaubten HTML-Tags hatte ich schon ausprobiert. In der SVG Grafik werden rect, path und polygon benutzt. Habe diese dann auch hinzugefügt (müsste im zweiten Screenshot zu sehen sein), aber leider ohne Erfolg.
Ich werde heute nochmal versuchen weiter zukommen.

Euch einen guten Start in die Woche.

[Andreas]

Man könnte sowas auch mit nem Insert-Tag reinbringen.

{{file::file-my-svg.html5}}

Ort: templates/file-my-svg.html5

[denfin]

Hallo zusammen,

danke für Eure Antworten!

Ich hatte leider immer noch keinen Erfolg. Habe die verwendeten SVG-Elemente unter erlaubte HTML-Tags eingefügt. Habe es auch mit einer Include-Datei probiert. Funktioniert immer noch nicht. Hat vielleicht noch jemand eine Idee? Die Grafik muss defintiv inline eingebunden werden, damit sie per CSS animiert werden kann.

EDIT: Weiß nicht ob es relevant ist, aber die Contao-Installation läuft lokal auf MAMP.

Liebe Grüße und schönes Wochenende,
Dennis

[Andreas]

Die mit dem Insertag im CE-HTML includete Datei müsste im FE as-is eingefügt sein. Da geht sonst eigentlich keiner mehr dran.

Prüfe, ob der Code im FE im Quelltext ist, so wie du es möchtest. Nicht mit dem DOM des Dev-Tools prüfen.

Wird die Grafik angezeigt, wenn du sie direkt mit nem Dev-Tool in den DOM einfügst?

Habe das gerade mit diesem SVG http://www.w3schools.com/html/tryit....tml_svg_circle ausprobiert, geht in 3.5.15 sowohl im CE-HTML direkt mit Freigabe von <circle><svg>, als natürlich auch direkt eingebunden über die Datei. Auch das manuelle Eingügen mit nem Dev-Tool auf irgendeiner Seite ist erfolgreich.

Poste mal bitte den Code dieses SVGs.

[Andreas]

Beachte auch, dass Contao einen BASE-Tag im HEAD benutzt. Deswegen wird folgendes Beispiel nicht funktionieren. http://www.w3schools.com/svg/tryit.a...=trysvg_linear

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Der Verweis auf die IDs innerhalb der SVGs muss deshalb die aktuelle Seite beinhalten.

...
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(de/foobar.html#grad1)" />
...

Evtl. musst du das auch bei deinem JS und CSS berücksichtigen.

Die aktuelle Seite kannst du dynamisch holen mit nem Insert-Tag (BE), der Environment-Klasse (Template, Include) oder Javascript.

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(de/foobar.html#grad1)" />
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url({{env::request}}#grad1)" />
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(<?= \Environment::get('request') ?>#grad1)" />

[denfin]

Hallo zusammen,

ich war nun endlich erfolgreich. Folgender Weg hat zum Ziel geführt.

– Den SVG-Code in einer Include-Datei unter "templates" eingefügt.
– Alle Attribute aus dem SVG-Tag entfernen
– Diese Include-Datei über ein ce_html eingebunden

Nun kann ich die Grafik animieren. Danke für eure Hife.

Beste Grüße,
Dennis

[ro-a-fi]

Hallo Denfin,

falls es dich weiterhin interessiert, hier eine vielleicht etwas komfortablere Lösung, SVGs inline und über das Bild-Inhaltselement aus der Dateiverwaltung einzufügen:
https://community.contao.org/de/show...l=1#post426915

[walkabout77]

Den SVG-Code in einer Include-Datei unter "templates" eingefügt.

Und wie geht das genau? Versuche es gerade mit Contao 4...

Gruss Stefan