Continuei a descobrir isso aos poucos. Isso requer bastante configuração para fazer minha pergunta:
SVG
Tenho um servidor web que gera SVG. Para esta pergunta, ele gera um SVG de teste muito simples…
<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>
É apenas um sinal de “mesclar” com aparência elaborada. Note que ele possui quatro elementos PATH.
Inline
Para colocar o SVG em uma postagem, estou usando algum JavaScript adicionado via meu tema.
O objetivo final seria criar um plugin adequado. Mas estou apenas tentando construir um conceito de prova. Então, ele é simplesmente colado na seção <head> da personalização do meu 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>
Onde…
var UMB = { é simplesmente uma variável global que me evita ter funções anônimas gigantes por toda parte.
$.fn.umbdv = é [o que eu acho que se chama] um “plugin” que estende o JQuery.
api.decorateCooked( me permite manipular a postagem antes que ela seja enviada ao navegador.
Encantação
Em um tópico, eu então escrevo…
<div data-custom="umbdv">/vtest</div>
UMB.svgload('__URL_REDACTED__', this) é chamado para aquele DIV.
UMB.svgload() entende corretamente a string /vtest, compõe uma URL e faz a solicitação AJAX. Ele executa com sucesso o append(data) e boop, meu SVG fica inline…
Meu alert() dentro de UMB.svgload() então dispara, exatamente como esperado. (Obviamente é uma gambiarra de debug, certo? :))
A pergunta (finalmente)
Tenho um tópico APENAS PARA FUNCIONÁRIOS no meu fórum hospedado no Discourse onde você pode ver isso em ação. (Estou falando com a equipe de suporte do Discourse que pode entrar na minha instalação como usuários Admin.)
https://forum.moversmindset.com/t/svg-experimentation-in-progress/1109
Por que…
$(target).children('path').each(function(){alert('here is a path element');});
…não seleciona nenhum dos elementos PATH?
Não faz nada — nenhum erro. Nada.
Próximo
Para onde irei se conseguir fazer esse trivial alert() de conceito de prova funcionar…
Estou ciente de que o fragmento do DOM com o qual estou “trabalhando” ainda não está conectado ao DOM real do documento (no momento em que UMB.svgload() é chamado). É por isso que espero que $(target)… seja o que eu preciso.
No final das contas, estou inlineando SVGs muito mais complexos e precisarei usar seletores JQuery mais complexos. Quero encontrar muitos elementos dentro de $(target) e anexar manipuladores de eventos (onclick, por exemplo) que chamarão outras funções globais UMB.….
