He seguido descubriendo esto poco a poco. Esto requiere mucha configuración para plantear mi pregunta:
SVG
Tengo un servidor web que genera SVG. Para esta pregunta, genera un SVG de prueba muy simple…
<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 simplemente un signo de “fusionar” con un aspecto elegante. Ten en cuenta que tiene cuatro elementos PATH.
Incrustación
Para insertar el SVG en una publicación, estoy utilizando algún JavaScript añadido a través de mi tema.
El objetivo final sería crear un plugin adecuado. Pero solo estoy intentando construir una prueba de concepto. Así que simplemente lo he pegado en la sección <head> de la personalización de mi tema:
<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('loaded!');
$(target).children('path').each(function(){alert('here is a 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>
Donde…
var UMB = { es simplemente una variable global que me evita tener funciones anónimas gigantes por todas partes.
$.fn.umbdv = es [lo que creo que se llama] un “plugin” que extiende JQuery.
api.decorateCooked( me permite manipular la publicación antes de que se envíe al navegador.
Encantamiento
En un tema, luego escribo…
<div data-custom="umbdv">/vtest</div>
UMB.svgload('__URL_REDACTED__', this) se llama para ese DIV.
UMB.svgload() entiende correctamente la cadena /vtest, compone una URL y realiza la solicitud AJAX. Realiza con éxito el append(data) y boop, mi SVG está incrustado…
Mi alert() dentro de UMB.svgload() se dispara, tal como se esperaba. (Obviamente es un truco de depuración, ¿verdad? :)
La pregunta (finalmente)
Tengo un tema SOLO PARA PERSONAL en mi foro alojado en Discourse donde puedes ver esto en acción. (Estoy hablando con el personal de soporte de Discourse que puede entrar en mi instalación como usuarios Administradores.)
https://forum.moversmindset.com/t/svg-experimentation-in-progress/1109
¿Por qué no…
$(target).children('path').each(function(){alert('here is a path element');});
…selecciona ninguno de los elementos PATH?
No hace nada: ningún error. Nada.
Siguiente
A dónde iré si logro que esta trivial prueba de concepto con alert() funcione…
Soy consciente de que el fragmento del DOM con el que “estoy trabajando” aún no está conectado al DOM real del documento (en el punto donde se llama a UMB.svgload()). Por eso espero que $(target)… sea lo que necesito.
En última instancia, estoy incrustando SVGs mucho más complejos y necesitaré usar selectores JQuery más complejos. Quiero encontrar muchos elementos dentro de $(target) y adjuntar manipuladores de eventos (onclick, por ejemplo) que llamarán a otras funciones globales UMB.….
