使用 CSS 样式化 SVG答案

【问题标题】：Style SVG with CSS使用 CSS 样式化 SVG
【发布时间】：2015-06-08 14:57:13
【问题描述】：

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

在 Internet Explorer 中，它使用 <text> 元素，但它在左侧偏移了 70 像素。我想将该元素向右移动 70 像素，但我无法做到这一点。我已经尝试过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

【问题讨论】：

只是在 IE 中？什么版本？
是的，仅在 IE 中，至少 11 个。
请包含必要的代码以理解问题本身的问题。 MVCE 会很棒。
还可以考虑报告问题：github.com/gionkunz/chartist-js/issues。即使在他们网站上的示例中，标签也未对齐。

标签： javascript jquery html css svg

【解决方案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]-->

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

【讨论】：

【解决方案2】：

通过Javascript修改x属性怎么样？

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

【讨论】：

【解决方案3】：

文本标签是 svg g 元素的子元素。您不能更改 g 元素的 x/y 位置但你可以使用 transform="translate(x,y)":

<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

【讨论】：

【解决方案4】：

将此添加到您的样式表中：

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

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

【讨论】：

请详细说明你的答案并说明代码是如何解决问题的。
我怀疑您是否可以将此 CSS 用于 HTML 定位到 SVG 元素。

【解决方案5】：

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

【讨论】：