2012-04-25 8 views
8

C'è un modo per usare em come unità per le traduzioni SVG? Come inSVG traduce con em come unità?

<rect height="10em" width="10em" transform="translate(0em, 10em)" 
style="fill:none;stroke-width:3;stroke:black/> 

Il rettangolo non si traduce in Firefox, a meno che non rimuovo l'em come unità.

+0

Mi scuso, non ho evidenziato lo snippet di codice come snippet di codice in modo che non fosse visualizzato. – user1357415

+0

Sono abbastanza sicuro che le unità di trasformazione, come i comandi '', devono essere tutte nello spazio utente. Tuttavia, sto postando questo come commento invece di una risposta perché al momento non riesco a trovare una specifica che confermi ciò. – Phrogz

+0

Ulteriori informazioni: leggi la sezione "Tranforms" [sic] qui: http://lists.w3.org/Archives/Public/www-style/2012Feb/0550.html – Phrogz

risposta

3

Sfortunatamente no;

Le specifiche explicitly allow for user units - corrispondenti alle unità CSS e predefinite alle unità pixel se non diversamente specificato - da applicare per le coordinate, mentre le traduzioni devono essere utilizzate con numeri in virgola mobile esclusivamente come definito dallo SVGMatrix interface.

10

È possibile ordinare di fare questo se si avvolgono l'elemento (s) che si desidera tradurre in un nuovo sistema di coordinate:

<svg> 
    <svg width="1em" height="1em" overflow="visible" viewBox="0 0 1 1"> 
    <rect height="10" width="10" transform="translate(0, 10)" .../> 
    </svg> 
</svg> 

Un'altra opzione se avete solo bisogno di traduzioni e utilizzare gli elementi che hanno x e y attributi (o equivalente) è quello di utilizzare quelli invece, in questo modo:

<rect x="0" y="10em" height="10em" width="10em" 
style="fill:none;stroke-width:3;stroke:black/> 

Una nuova specifica per transforms in CSS/SVG è attualmente in lavorazione, e sarà effettivamente consentire alle unità a definizioni, vedi here.