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

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

在SVG中搜索ID hours，minutes，date，以查看<text>元素的位置。

我曾经见过有人提到将<rect>元素放在文本项上方，尽管我已经尝试过但没有运气实现我想要的目标。

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

如果有人能对此有所启发，我将非常感激！

谢谢

Answer 1

您可以尝试<tspan，并可以像这样给它x和y：

<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg" width="500">
  <text x="10" y="30" class="small">
    You are
    <tspan x="10" y="40">not</tspan>
    <tspan x="10" y="50">a banana!</tspan>
  </text>
</svg>

为您提供： enter image description here

请注意，tspan和text的x值相同，而tspan的y值增加，因此它会显得较低。

您可以在此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan

Answer 2

一种解决方案是使用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>

是否可以在SVG中内联文本？

2 个答案: