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

Question

我正在尝试将 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”标签。

Answer 1

为了只选择您所追求的单个<text>元素，您需要选择. 以下选择器将为您执行此操作：<g><svg>

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

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

演示在这里

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