Question

我使用Chartist插件生成图表。我注意到它通过浏览器进行不同的元素生成。

在Internet Explorer中，它使用<text>元素，但它在左侧偏移70px。我想在正确的70px上移动该元素，但我无法做到这一点。我尝试使用text-anchor，transform，一些字母和单词间距黑客，但它们都不起作用。

以下是我要修改的代码：

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

所以，而不是X-20，我想要X-90。

Here is a live demo

Answer 1

正确（但可能很慢）解决方案

这是Chartist库的一个错误。他们正在计算他们的标签位置，因此它不与该类别居中对齐。

对于永久性解决方案，您需要随身携带它们，以便将错误修复到他们一边。

您可以在this GitHub page找到作者的联系方式。

临时解决方案

在此期间，您可以通过将整个标签块向右移动来应用脏修复。

由于IE11忽略了通过CSS应用的transform属性，我们需要将其直接应用于SVG节点属性。

由于您的页面上有jQuery，我们将使用它来简化：

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

毋庸置疑，这需要之后的其他图表代码。

Answer 2

如何通过Javascript修改x属性？

<![if !IE]>
<script>
document.getElementsByTagName("text")[0].setAttribute("x", 95);
</script>
<![endif]>

Answer 3

文本标签是svg g元素的子元素。您无法更改g元素的x / y位置但你可以使用transform =＆＃34; translate（x，y）＆＃34;：

<g transform="translate(70,0)" ... >
    <text class="ct-label ct-horizontal ct-end" x="25" y="205" width="179" height="20">FEB-2015</text>
    <text class="ct-label ct-horizontal ct-end" x="25" y="205" width="179" height="20">FEB-2015</text>
    ......
</g>

关于SVG G的信息： http://tutorials.jenkov.com/svg/g-element.html

Answer 4

将此添加到您的样式表：

text{
  position: relative;
  right: 0px;
  left: 50px;
}

它将移除您的左侧变换，并将<text></text>移至右侧（50px）

Answer 5

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

使用CSS样式SVG

5 个答案:

正确（但可能很慢）解决方案

临时解决方案