javascript - 有没有办法在 SVG 中嵌入文本？

Question

我有一个 iPhone 的 SVG，我在上面添加了一些 JS 来将时钟时间和日期更改为相对于用户的当前日期/时间。

图像是一个 SVG，在里面我用 <text> 定义了文本元素。标签，但似乎我只能对每个标签进行 y 对齐或 x 对齐。这个问题是随着数字的变化，一些数字有不同的宽度，然后将它推近或远离它的兄弟。

基本上，我想实现一些可以用 flex 完成的事情。例如，如果 .flex已为其分配了 flexbox:

<div class="flex">
    <div>13</div>
    <div>:</div>
    <div>23</div>
</div>

这会将所有 div 拉入内联，并且 div 的宽度将在必要时扩展，以保持所有内联、整洁。 Like this .

我想要更改 SVG 中元素的宽度，但要保持在图像的中央，而不要向左或向右偏移一点点。这同样适用于日期。

请看这个例子:https://codepen.io/mrmathewc/pen/vodbmm

包含时间和日期的屏幕宽度为 300 像素。

搜索 id hours , minutes , date在 SVG 中查看 <text> 在哪里元素已定位。

我看到有人提到把 <rect>文本项上方的元素，我已经尝试过但没有运气实现我想要的。

我还尝试将时间加到一个 <text> 中元素，而不是将其拆分，但随着数字的变化，我的问题仍然存在。

如果有人能对此有所启发，我将不胜感激!

谢谢

Answer 1

一种解决方案是使用 text-anchor，这样您就可以将小时向右对齐，将完整的日期向中间对齐。它将适应文本大小:

<g id="Group" opacity="0.8" transform="translate(285.777635, 160.997429)" fill="#FFFFFF" fill-rule="nonzero">
  <text text-anchor="end" x="60" y="0" fill="white" class="clock-numerals" id="hours">00</text>
  <text x="60" y="0" fill="white" class="clock-numerals">:</text>
  <text x="75" y="0" fill="white" class="clock-numerals" id="minutes">00</text>
</g>

<g id="Group" opacity="0.8" transform="translate(294.228792, 190.920308)" fill="#FFFFFF" fill-rule="nonzero">
  <text text-anchor="middle" x="60" fill="white" class="clock-date" id="date">1</text>