css - 如何相对于页面大小缩放一组文本标签？

Question

我已经搞砸了好几个星期了，所以我只想问问怎么做。

我一直在研究一个小的 SVG 倒计时时钟，只是为了它。但是，当我尝试根据页面的大小来定位事物时，我陷入了困境。我似乎无法相对于页面调整 text 标签的大小，而且我找不到将它们放入组中以调整大小的方法。

我试过将它们放入 symbol 标签中，并使用 viewBox，但我似乎也无法让它工作。

我的预期目标是让它在从显示器到智能手机的任何尺寸的屏幕上运行。所以我想用 min 和 max width/height 或类似的东西做一些事情，并将其应用于数字及其关联标签的组合。因此，我将有一组天数，其中包含天数(由脚本更改)，然后在其下方显示“天数”一词。

以下是我正在使用的方法，如果有帮助的话:

http://jsfiddle.net/2P9qV/

有人有什么想法吗？我已经困惑了几个星期。

Answer 1

好吧，我终于明白了。幸运的是，我能够在一个 SVG 中使用多个 SVG 来创建内容，然后使用 use 标签显示它。

所以我在 defs 中将每个设置为它自己的符号的一部分。从那里，我使用 symbol 标签上的 viewBox 将绘图空间限制为所创建内容的确切宽度和高度，这是我通过检查元素并使用它具有的高度和宽度发现的被制作为(没有'px')。这样，我可以将整个集合置于具有 use 标记的 SVG 中，然后将 SVG 的宽度设置为 100%，将高度设置为我想要将其缩放到的百分比。由于这些设置为百分比，页面会将 SVG 的大小限制为最大限制，同时仍保持比例，因此它不会倾斜。

所以其中一个符号是:

<symbol id="daysSymbol" viewBox="0 0 110 156">
    <g>
        <text id="days" y="0" x="50%" font-size="100" class="time big">00</text>
        <text id="daysT" y="100" x="50%" font-size="40" class="text bigText">DAYS</text>
    </g>
</symbol>

为此 SVG 将是

<svg id="daysSVG" height="50%" width="100%" y="30%"> 
    <use xlink:href="#daysSymbol" height="100%"/>
</svg>

它还让我在管理页面内容的方式上发挥创意。当发生某些事情时，我能够动态删除内容，并缩放其他元素以占用新空间。

对于那些好奇的人，这是最终产品

https://hostr.co/file/PLCY7lodb7Lk/xboxCountdown.svg

它不会持续那么久，因为它是一个倒计时时钟。但我不会删除它(只要它不会被自动删除)，如果你想看看它是如何工作的，你只需下载它并更改它倒计时的日期。