javascript - 使用 CSS 设置 SVG 样式

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-90 而不是 X-20。

Here is a live demo

Answer 1

正确(但可能很慢)的解决方案

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

对于永久解决方案，您需要与他们一起解决，以便他们修复错误。

您可以在this GitHub page 上找到作者的详细联系方式| .

临时解决方案

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

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

由于您的页面上有 jQuery，为了简单起见，我们将使用它:

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

不用说，这需要在您的其他图表代码之后。