[SVG/JS] @font-face in SVG

[SoulStorm892]

Salve a tutti!

...

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + 
"<foreignObject width='100%' height='100%'>" + 
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" + 
"[i]I[/i] like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" + 
"</div>" + "</foreignObject>" + "</svg>"; 
var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
   ctx.drawImage(img, 0, 0);
   DOMURL.revokeObjectURL(url); 
}; 
img.src = url;
... 

Questo è lo snippet. L'ho preso da developer.mozilla e praticamente serve a trasformare dell' HTML in un'immagine (lo scopo è mettere del testo in un div, fargli una "fotografia" e poi spalmarla su un canvas). Ahimè il procedimento si serve dell'SVG e le mie conoscenze di quest ultimo stanno a zero.

Ciò che voglio fare è settare un webfont che agisca sul tag div o span dentro l'svg!
Ecco il problema... ho letto che anche in svg si usa la @font-face ma non riesco ad inserirla, voglio dire, ho provato a metterla nel canonico tag style ma nulla. Qualche idea?

Ecco la font-face che sto provando ad inserire:

@font-face 
{ 
   font-family: 'Neuropol';
   src: url('font.ttf') format("truetype"); 
} 

Grazie a tutti per eventuali risposte

PS. spero di aver postato nella sezione giusta

[cavicchiandrea]

Viste le poche conoscenze partirei da qui

[SoulStorm892]

Avessi tempo e passione imparerei pure un po' di SVG. Il fatto è che mi ci sono imbattuto (al 99% sarà l'unico punto dell'intero progetto dove dovrò utilizzarlo) e volevo sbrigarmela senza troppe complicazioni!

Riferito al codice sopra:

<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
    <foreignObject width='100%' height='100%'>
        <style> 
           @font-face  {     font-family: 'Neuropol'; 
           src: url('http://127.0.0.1:8888/gui/font.ttf') format('truetype');  }
          .w{ font-family: 'Neuropol'; color:white;}
        </style>
        <div xmlns='http://www.w3.org/1999/xhtml' class='w' style='font-size:40px;'>
             <span class='w' style='text-shadow:1px 1px 8px red;'>I like cheese</span>
             [img]http://127.0.0.1:8888/gui/ico.fw.png[/img]
        </div>
    </foreignObject>
</svg> 

Ho inserito il font-face ma il testo non viene visualizzato (è come se non riconoscesse il font). Se al posto di Neuropol provo un comune Arial funziona senza problemi -_- All'inizio pensavo fosse un problema di url e che l'svg non riuscisse a caricare il font ma come vedete ho provato ad inserire anche un'immagine e questa viene caricata e visualizzata correttamente.

Sinceramente non so come muovermi <.<