Problema: È necessario replicare il testo SVG creato in RaphaelJS con carattere font variabile, dimensione carattere, posizione, scala, rotazione in SVG.Manipolazione/traduzione di <text> in SVG (aggiunta di un rettangolo di selezione)
MA ... Raphael utilizza una casella di delimitazione per il testo che ha un'altezza indipendente dall'altezza effettiva della stringa. L'altezza del riquadro di delimitazione è basata su font-size e font-family, ma è indipendente dalla stringa effettiva. Quindi una stringa di "Y" e "," (con lo stesso font-face e font-size) hanno la stessa altezza.
Quando ricreamo il testo in SVG (generandolo in PHP) possiamo ottenere la dimensione del carattere corretta e la famiglia di caratteri corretta. Tuttavia, l'altezza di SVG NON è indipendente dalla stringa effettiva. Quindi un "," avrebbe un'altezza molto più bassa di una "Y". Questa differenza in altezza interrompe la rotazione e il posizionamento.
DOMANDA: Come possiamo creare svg con una ‘scatola di delimitazione’ che replica di RaphaelJS getBBox (che essenzialmente solo le dimensioni di una scatola che si adatterebbe qualsiasi carattere in esso) in modo che possiamo imitare la rotazione e il posizionamento da RaphaelJS? NOTA: Siamo in grado di convertire il testo-> percorso per SVG, se questo aiuta. Abbiamo anche accesso ai file dei font.
EDIT: Il problema è stato risolto utilizzando il comando() matrice e traducendo direttamente le trasformazioni sopra, anziché applicare posizionamento, quindi scalatura, allora rotazione.
Domanda ben formulata, +1. Non ho capito da dove vengono i bounding box, dall'esempio PHP (nell'esempio JS hai usato una funzione RaphaelJS, quindi cosa viene attualmente utilizzato per generare quel bounding box "errato" nell'esempio a destra?). –
+1 anche da me, e anch'io sarei interessato a sapere come vengono letti i bounding box PHP (cc @CamiloMartin). Attualmente sto usando 'inkscape' come ho [spiegato qui] (http://stackoverflow.com/a/10078156/472495) ma sarebbe bello vedere se c'è un modo migliore. – halfer