Einbindung SVG Banner in Seiten

[Gonzo Gates]

Hallo Gert,

ich möchte ein SVG-Banner https://wiki.selfhtml.org/extensions/Se ... iew_result in eine meiner Seiten einbinden. In einer lokalen HTML-Datei funzt die Darstellung.

Code: Select all

<h3>
<svg width="500" height="80" viewBox="0 0 600 100"><!-- werte bei width und height bestimmen die groesse. viewbox werte beschneiden die grafik --> 
  <defs>
  <style>
  .banner {
    fill: beige;/* */
    /*fill: lightgrey;  Hintergrund banner */
    /*stroke: black;*/
    stroke: blue; /* rahmen banner */
    stroke-width: 3px;
  }
  text{
    /*text-anchor: middle;*/
    /*text-anchor: left;  text wird nach rechts verschoben */
    text-anchor: right; /*text wird nach rechts verschoben */
    font-size: 30px;
  }
  </style>    
  </defs>  
  <path class="banner" id="aussen" d="M15,15 q65,25 130,20 l-50,10 v30 q-40,0 -80,-15 l60,-12 z m130,20 l-50,10 v10 h50z" />  
  <use  class="banner" xlink:href="#aussen" x="0" y="0" transform="translate(590,0) scale(-1,1)"/>
  <rect class="banner" x="95" y="45" width="400" height="45"/>
  <text x="200" y="80">Überschrift</text><!-- text kann mit x- und y-wert verschoben werden -->
</svg>
</h3>

Bei Tiny habe ich in der Konfig schon 'svg,defs,use,path,rect,text,h3' in 'init_full.js' als 'custom_elements' zugelassen und die Tags werden beim Abspeichern nicht gelöscht (Den Spaß hatte ich schon bei bei style-Tags).

Das einzuge, bei der Vorschau, was mir 'angezeigt' wird, ist 'Überschrift'. Kann man aber nur herausfinden, wenn man die minimale Zeile kopiert und in enen Texteditor einfügt.

Im Forum habe ich schon nach 'SVG' gesucht, aber als einziges bekam ich, das 'SVG'-Schriften jetzt gingen. -> Keine Hilfe...

-----------------------------------------------------------------------------

Meine Ausstattung:
NB FSC E752
RAM 8 GB
SSD 256 GB
USB-SSD 256GB (Für Websites und Rezepte)
USB-HDD 2 TB (Datengrab)
Win10 22H2
XAMPP 8.2.0 (64 Bit)
Java 8_351 (64 Bit)

=> kein Online Auftritt - alles lokal

-----------------------------------------------------------------------------

Hat nichts mit meiner Anfrage zu tun: Ich musste schon so oft in die Innereien von CMSimple eingreifen, dass es so ist, wie ich es möchte. Damit ich einen Umzug mit meinen Templates auf eine neue CMSimple-Version machen kann, ist eine längere Dokumentation entstanden und die hat mir beim Umzug von V5.9 (V5.10 habe ich willentlich ausgelassen) auf V5.11 mächtig geholfen. Ich könnte natürlich auch ein 'diff' machen, aber das würde komplizierter werden.

Ich habe mich parallel zu der Modifikation von CMSimle auch nach anderen CMS ohne DB umgeschaut. Ich finde aber, dass CMSimple die anderen toppt! -> Chapeau!

Gruß
Gonzo

[Gert]

Hallo Gert,

Vielen Dank für die persönliche Ansprache, aber ich möchte einfach noch einmal darauf hinweisen, dass hier nicht die kostenlose Abteilung von ge-webdesign ist

Dieses Forum habe ich eigentlich eingerichtet, damit sich die Anwender gegenseitig helfen oder interessante Lösungen vorstellen können, aber das war und ist wohl eine Illusion. Hier schauen die Leute nur rein, wenn sie ein Problem haben, und nicht, um anderen bei ihren Problemen zu helfen

Bei Tiny habe ich in der Konfig schon 'svg,defs,use,path,rect,text,h3' in 'init_full.js' als 'custom_elements' zugelassen ...

Das solltest Du nicht tun, wenn das beim nächsten Update erhalten bleiben soll. Mach Dir besser eine Kopie (init_gonzo.js) und aktiviere die in der CMS Konfiguration.

=> kein Online Auftritt - alles lokal

Wie soll ich da herausfinden, was am Ende im Quelltext steht? Denn darauf kommt es ja an.

Ich empfehle das ganze als Funktion bereitzustellen, in einer ./cmsimple/userfuncs.php (das ist updatesicher, denn diese Datei wird nicht mit ausgeliefert):

Code: Select all

function svgElements($svgElement='div',$svgText='Text'){
$output = '
<' . $svgElement . ' style="width: 100%; max-width: 600px; margin: 0 auto;">
<svg viewBox="0 0 600 100">
<path style="fill: #d0d6d9; stroke: #606669; stroke-width: 2px;" id="aussen" d="M15,15 q65,25 130,20 l-50,10 v30 q-40,0 -80,-15 l60,-12 z m130,20 l-50,10 v10 h50z" />
<use xlink:href="#aussen" x="0" y="0" transform="translate(590,0) scale(-1,1)" />
<rect style="fill: #d0d6d9; stroke: #606669; stroke-width: 2px;" x="95" y="45" width="400" height="45" />
<text x="300" y="79" style="text-anchor: middle; font-size: 32px;">' . $svgText . '</text>
</svg>
</' . $svgElement . '>
';
return $output;
}

Beispiel Aufruf im Inhalt:

Code: Select all

{{{plugin:svgElements('h2','h2 Überschrift');}}}

Zum CMSimple Standard werde ich das nicht machen, das ist eher was für Bastler wie Dich

Gert

=================================

PS: So soll es wohl aussehen?

https://www.ge-webdesign.de/demotpl/?Pl ... _einbinden

[Gonzo Gates]

Hallo erstmal,

vielen Dank für die schnelle Hilfe. Das geht wunderbar!

Jetzt kann ich mit anderen SVGs experimentieren.

Kommt voll rein in meine Dokumentation, damit ich es bei Umzug auf V5.12 nicht vergesse (Ach nee, das haut ja in das nächste Update nicht hinein). Egal.

Dieses Forum habe ich eigentlich eingerichtet, damit sich die Anwender gegenseitig helfen oder interessante Lösungen vorstellen können, aber das war und ist wohl eine Illusion.

Vielleicht ist die Anzahl der CMSimple Anhänger nicht groß genug.

Lösungen, Ansätze, Versuche kann ich vielleicht unter der Rubrik 'Other Solutions' anlegen.

Bzgl. der Anrede habe ich mich umgsehen, wie ich einen Beitrag eröffne...

Gruß
Gonzo

-----------------------------------------------------------------------------------

if ($Ahnung == NULL) {
read($Handbook);
}

[Gert]

Bzgl. der Anrede habe ich mich umgsehen, wie ich einen Beitrag eröffne...

Hallo Gonzo,

es ging nur darum, wie ein Thread eröffnet wird. Wenn das mit "Hallo Gert" geschieht, fühle ich mich manchmal genötigt, in den Thread einzusteigen, obwohl ich gar nicht will, weil mich das Thema nicht interessiert oder ich mich damit überhaupt nicht auskenne. Oder weil ich ganz einfach keine Lust habe. Wenn ich einmal drin bin im Thread, dann ist das aber ok

In das SVG Thema wollte ich eigentlich gar nicht einsteigen, weil ich mich damit nicht auskenne. Dann ist mir aber klar geworden, dass es hier gar nicht um SVG geht, sondern darum, wie man den SVG-Code in den Inhalt bekommt.

Also, nichts für ungut, manchmal muss ich einfach ein wenig rummotzen

Dann hat es mich aber doch interessiert, und ich habe ein wenig rumgebastelt. Im Ergebnis ist mein SVG-Code responsiv, im Gegensatz zum ursprünglichen Code. Und was macht SVG für einen Sinn, wenn es am Ende nicht responsiv ist?

Eigentlich sollte ich mich geehrt fühlen, dass Du bei Deinem ersten Thread hier im Forum schon wusstest, an wen Du Dich halten musst

Ich finde aber, dass CMSimple die anderen toppt! -> Chapeau!

Vielen Dank für die Blumen, und viel Spass mit CMSimple,

Gert