Come tradurre un gruppo SVG di una percentuale del viewport

Question

Ho uno svg <rect> che è in un <g> (gruppo) e vorrei ridimensionarlo e quindi tradurlo da una percentuale del viewport. La maggior parte di tutto in SVG consente la specifica delle unità attraverso un numero ridicolo di opzioni; per esempio. px, em,%, ex, pt, pc, ... Tuttavia sembra che il numero specificato nella traduzione sia solo pixel.

Il fatto è che se devo tornare indietro e ricalcolare i valori dei pixel per la traduzione, allora il mio svg diventa dipendente dalla risoluzione. Allora io, tu e tutti saremmo stati risucchiati in un paradosso. Puoi capire perché sono un po 'preoccupato.

<svg> 
    <g transform="scale(1, 1) translate(0, 0)"> 
    <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
</svg> 

http://jsbin.com/ubeqot/1/edit

Answer 1

Stick dell'elemento <g> in <svg> elemento interno e aggiungere xey attributi con valori percentuali alla <svg> elemento interno per tradurlo.

<svg> 
    <svg x="10%" y="20%"> 
    <g transform="scale(1, 1)"> 
     <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
    </svg> 
</svg> 

Se si desidera la scala da applicare prima si dovrebbe mettere l'elemento <svg> all'interno invece il <g>.