Come ruotare il testo SVG con css

Sto usando c3.js per produrre un grafico. il problema è che non posso modificare la posizione degli elementi di testo su xgrid. Mi piacerebbe che fossero orizzontali. Ma quando mai cerco di usare ruotare gli elementi vanno fuori da svg. Come posso mettere quindi esattamente dove sono, ma li faccio orizzontaleCome ruotare il testo SVG con css

js violino: http://jsfiddle.net/yrzxj3x2/7/

ecco il css che ho provato per il codice completo vedere js giocherellare

.xLineLable text{ 
    font-size: 12px; 
} 
.c3-grid text { 
    fill: #000; 
    transform: rotate(0); 
    }

fonte

2016-02-19 Imo

utilizza l'origine di trasformazione forse –

L'attributo 'transform' sull'elemento SVG stesso sembra sovrascrivere qualsiasi CSS che gli si assegna. Sfortunatamente, [Non vedo alcun modo per ruotare il testo usando c3.js] (http://c3js.org/reference.html#grid-x-lines). Assegnare il testo orizzontale a una linea verticale è comunque ambiguo e non lo consiglierei. – Blazemonger

potrebbe essere necessario reimpostare il display in modo che richieda la trasformazione, ma un comportamento strano in FF http://jsfiddle.net/yrzxj3x2/19/ –

È possibile ruotare il testo in orizzontale aggiungendo seguendo i CSS.

.c3-grid text { 
    fill: #000; 
    transform:rotate(0deg) translate(266px, 0px); 
    }

Se si desidera aggiungere più righe, è necessario aumentare il valore manualmente.

Si può anche dare la posizione del tipo:

x: { 
    lines: [ 
     {value: "2016-01-08", text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "outer-middle"} 


    ]

Working Fiddle

Edit:

Se vuoi linea orizzontale allora perché non ti metti in ygrid.

grid: { 
    y: { 
     lines: [ 
       {value: 50,text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "middle"}, 

      ] 
    },

Fiddle

fonte

2016-02-23 03:58:43 ketan

ma poi quando aggiungo più righe al grafico non viene visualizzato anche il testo ... http://jsfiddle.net/yrzxj3x2/26/ – Imo

Controlla il mio modificato. – ketan

Così il testo del violino dice di ruotare di 180 gradi ...

ho fatto qui:

transform: translate(90px, 230px) rotate(90deg) !important;

ho anche reso orizzontale come desiderato e spostato in un posto leggibile:

transform: translate(295px, 115px);

È possibile spostare le coordinate xey per rimetterlo più in alto se lo si desidera. Sembra che gli elementi della griglia utilizzino le posizioni. Non sei sicuro di come sia il codice.

fonte

2016-02-29 05:23:21 D3TXER

Questo è uno di quei casi ** fastidiosi ** in cui hai bisogno di 4 linee simili, ma specifiche del browser nel tuo css, dettagli qui https://css-tricks.com/examples/ShapesOfCSS/ il modulo di base è ** svg { transform: ruotare (45 gradi); } ** –

Se stai parlando dei prefissi del browser, puoi usare il plug-in sublime di prefisso automatico per aggiungere quelle linee per te e sono sicuro che molti altri strumenti lo completeranno automaticamente anche per te. – D3TXER

risposta

Problemi correlati