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.
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
Post a Comment