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”和“文本”标签。

Answer 1

为了选择只有一个 <text>之后的元素，您需要选择 <g> 中的第一个文本元素<svg> 的 child .以下选择器将为您完成此操作:

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

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

Demo here

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