使用 Google Gauge 的 jQuery 或 CSS 文本 SVG 移动底部

【问题标题】：Move bottom with jQuery or CSS text SVG of Google Gauge使用 Google Gauge 的 jQuery 或 CSS 文本 SVG 移动底部
【发布时间】：2016-09-28 19:23:01
【问题描述】：

我正在尝试将 Google Gauge 底部的文本移动到它，因为文本对于仪表来说很长。

这是我的 HTML 代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div style="width:400px;text-align:center">
  <div id="chart_div" style="width: 400px; height: 400px;">
  </div>
  <h1>MemoryAfter</h1>
</div>

您可以在此处找到示例：https://jsfiddle.net/roby492/1sjrq64s/1/

你怎么看，标准文本位置是 MemoryBefore 文本，但我会将它移动到 MemoryAfter 文本的位置。

我尝试使用 jQuery 更改 y 参数，但找不到 'g' 和 'text' 标记。

【问题讨论】：

标签： jquery css svg google-gauges

【解决方案1】：

为了选择您所关注的单个<text> 元素，您需要选择<svg> 的<g> 子元素内的第一个文本元素。以下选择器将为您执行此操作：

$("svg > g > text:first")

然后您可以使用 jQuery 的 attr() 函数更改 y 属性。

Demo here

但是，您不能将其向下移动到比我在演示中更远的位置，因为它将超出 SVG 的范围。如果您需要它更低，则需要使 SVG 进一步向下延伸。为此，您需要更改<svg> 的height 属性。

【讨论】：

我在我的 jsfiddle 中添加了一个 each cicle 以在多个仪表上移动文本。