javascript - Style SVG with CSS -


i using chartist plugin generating charts. i've noticed different element generations through browsers.

in internet explorer, uses <text> element, offset on left 70px. want move element on right 70px, can't achieve this. i've tried text-anchor, transform, letter , word spacing hacks, none of them work.

here code trying modify:

<text class="ct-label ct-horizontal ct-end" x="25" y="205" width="179" height="20">feb-2015</text> 

so, instead of x-20, want x-90.

here live demo

correct (but possibly slow) solution

this is bug of chartist library. calculating label position not center-aligned category.

for permanent solution, need take them, bug fixed on side.

you can find author's contact details on this github page.

temporary solution

in interim, can apply dirty fix shifting whole labels block right.

as ie11 ignores transform properties applied via css, need apply directly svg node properties.

since have jquery on page, we'll use simplicity sake:

<!--[if ie]> <script> $chart.on( 'created', function() {   $( '.ct-labels' ).attr( 'transform', 'translate(70)' ); } ); </script> <![endif]--> 

needless say, needs go after other chart code.


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -