• F
    User Newbie •

    SVG - rotazione elementi polygon,rect e text

    Salve, ho realizzato tramite uno script in php un generatore di file svg. Dove tengo salvati in un database tutte le coordinate e dimensioni di ogni singolo elemento per poi creare il file in svg.

    Da poco ho inserito la funzione di rotazione degli elementi inserendo l'attributo transform="rotate(angolo x y)" su ogni elemento.

    Ho notato che gli elementi text e rect riesco a gestirli bene mentre alcune icone identificate nel codice come polygon non riesco a gestire la loro rotazione. Vi faccio vedere un esempio di un immagine rasterizzata del risultato che dovrei ricevere e il file in svg che genero.

    Immagine rasterizzata: postimg.org/image/tvdyicidd/

    codice svg:

    [HTML]<defs><clipPath id="bordo"><rect x="0" y="0" width="646" height="433"/></clipPath></defs><g clip-path="url(#bordo)"><rect width="646" height="433" style="fill:rgb(47, 139, 174);"/><g transform="translate(0,0)"><defs><symbol id="icn_20800" preserveAspectRatio="xMinYMin none" viewBox="0 0 241.951 194"><g id="Livello_1"></g><g id="Livello_2"> <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#d4a83f" points="189.067,54.616 182.608,50.889 176.603,54.354 132.995,79.527 132.995,95.939 182.79,67.187 199.948,77.094 199.948,97.752 199.948,118.417 182.056,128.75 164.161,139.075 146.269,128.75 128.372,118.417 128.372,97.752 128.372,77.094 141.325,69.612 141.323,69.519 178.101,48.287 164.161,40.236 139.255,54.616 122.284,64.412 102.697,53.106 77.791,38.729 52.885,53.106 27.975,67.482 27.975,96.249 27.975,125.009 52.885,139.385 59.343,143.112 65.345,139.648 65.347,139.648 108.955,114.468 108.955,98.062 59.16,126.815 42.001,116.907 42.001,96.249 42.001,75.584 59.894,65.252 77.791,54.923 95.684,65.252 113.579,75.584 113.579,96.249 113.579,116.907 100.625,124.382 100.627,124.483 63.849,145.714 77.791,153.766 102.697,139.385 119.673,129.587 139.255,140.895 164.161,155.271 189.067,140.895 213.976,126.512 213.976,97.752 213.976,68.992 "/></g></symbol></defs><use transform="rotate(120 53 12)" x="53" y="12" width="148" height="157" xlink:href="#icn_20800"/><defs><symbol id="icn_20801" preserveAspectRatio="xMinYMin none" viewBox="0 0 241.951 194"><g id="Livello_1"></g><g id="Livello_2"> <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#bb2a2d" points="189.067,54.616 182.608,50.889 176.603,54.354 132.995,79.527 132.995,95.939 182.79,67.187 199.948,77.094 199.948,97.752 199.948,118.417 182.056,128.75 164.161,139.075 146.269,128.75 128.372,118.417 128.372,97.752 128.372,77.094 141.325,69.612 141.323,69.519 178.101,48.287 164.161,40.236 139.255,54.616 122.284,64.412 102.697,53.106 77.791,38.729 52.885,53.106 27.975,67.482 27.975,96.249 27.975,125.009 52.885,139.385 59.343,143.112 65.345,139.648 65.347,139.648 108.955,114.468 108.955,98.062 59.16,126.815 42.001,116.907 42.001,96.249 42.001,75.584 59.894,65.252 77.791,54.923 95.684,65.252 113.579,75.584 113.579,96.249 113.579,116.907 100.625,124.382 100.627,124.483 63.849,145.714 77.791,153.766 102.697,139.385 119.673,129.587 139.255,140.895 164.161,155.271 189.067,140.895 213.976,126.512 213.976,97.752 213.976,68.992 "/></g></symbol></defs><use transform="rotate(90 286 171)" x="286" y="171" width="216" height="269" xlink:href="#icn_20801"/></g><text transform="rotate(60 195 250)" x="195" y="250" style="text-decoration:none; font-family:Michroma; font-style:normal; font-size:42px; font-weight:normal; fill:rgb(236, 236, 236);">Architetto Rossi</text><text transform="rotate(60 424 176)" x="424" y="176" style="text-decoration:none; font-family:Michroma; font-style:normal; font-size:22px; font-weight:normal; fill:rgb(236, 236, 236);">primo piano</text></g><wappalyzerData id="wappalyzerData" style="display: none"/><script id="wappalyzerEnvDetection" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"/>[/HTML]

    Come faccio a rotare le 2 immagini presenti in questo esempio senza alterare le loro coordinate?

    Grazie

    0
Effettua l'accesso per rispondere