Ich habe langsam weiter herausgefunden, wie das geht. Um meine Frage zu stellen, ist viel Vorbereitung nötig:
SVG
Ich habe einen Webserver, der SVG generiert. Für diese Frage erzeugt er eine sehr einfache Test-SVG…
<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="0 0 100 100">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#40638C" stroke-width="3"></path>
<path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#40638C" stroke-width="3"></path>
<path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#40495E" fill="#40495E"></path>
<path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"></path>
</svg>
Es ist nur ein stilvoll aussehendes „Merge“-Symbol. Beachten Sie, dass es vier PATH-Elemente enthält.
Inline-Einbindung
Um die SVG in einen Beitrag einzubinden, verwende ich etwas JavaScript, das über mein Theme hinzugefügt wird.
Das Endziel wäre, ein richtiges Plugin zu erstellen. Aber ich versuche gerade nur, einen Proof-of-Concept zu bauen. Daher wird es einfach in den <head>-Bereich meiner Theme-Anpassung eingefügt:
<script type="text/discourse-plugin" version="0.8">
var UMB = {
svgload: function(base, target) {
var url = base + $(target).text();
$(target).html('');
$.ajax({
method: "GET",
url: url,
async: false,
dataType: "text",
success: function(data) { $(target).append(data); }
});
alert('geladen!');
$(target).children('path').each(function(){alert('hier ist ein path-Element');});
},
}
$.fn.umbdv = function() {
this.each(
function() {
UMB.svgload('__URL_REDACTED__', this);
}
);
return this;
};
api.decorateCooked(
$elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
{ id: 'umbdv' }
);
</script>
Woher…
var UMB = { ist einfach eine globale Variable, die mir erlaubt, riesige anonyme Funktionen überall zu vermeiden.
$.fn.umbdv = ist [was ich für] eine „Plugin“-Erweiterung von JQuery halte.
api.decorateCooked( ermöglicht es mir, den Beitrag zu manipulieren, bevor er an den Browser gesendet wird.
Aufruf
In einem Topic schreibe ich dann…
<div data-custom="umbdv">/vtest</div>
UMB.svgload('__URL_REDACTED__', this) wird für dieses DIV aufgerufen.
UMB.svgload() versteht korrekt den String /vtest, stellt eine URL zusammen und führt die AJAX-Anfrage aus. Es führt erfolgreich append(data) aus und boop – meine SVG ist inline…
Mein alert() innerhalb von UMB.svgload() wird dann wie erwartet ausgelöst. (Es ist offensichtlich ein Debug-Hack, oder? :))
Die Frage (endlich)
Ich habe ein NUR FÜR MITARBEITER bestimmtes Topic in meinem Discourse-Forum, in dem man dies live sehen kann. (Ich spreche mit Discourse-Mitarbeitern/Support, die als Admin-Benutzer in meine Installation eindringen können.)
https://forum.moversmindset.com/t/svg-experimentation-in-progress/1109
Warum selektiert…
$(target).children('path').each(function(){alert('hier ist ein path-Element');});
…keines der PATH-Elemente?
Es passiert nichts – keine Fehler. Nichts.
Nächste Schritte
Wo ich hingehe, wenn dieser triviale alert()-Proof-of-Concept funktioniert…
Mir ist bewusst, dass der DOM-Abschnitt, mit dem ich „arbeite“, zum Zeitpunkt des Aufrufs von UMB.svgload() noch nicht mit dem tatsächlichen Dokument-DOM verbunden ist. Deshalb erwarte ich, dass $(target)… das ist, was ich brauche.
Letztendlich bin ich dabei, weitaus komplexere SVGs inline einzubinden, und ich werde komplexere JQuery-Selektoren benötigen. Ich möchte viele Elemente innerhalb von $(target) finden und Ereignisbehandlungsfunktionen (z. B. onclick) hinzufügen, die andere globale UMB.…-Funktionen aufrufen.
