0

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

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

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

我的预期目标是让它在从显示器到智能手机的任何尺寸的屏幕上工作。所以我想用min, 和max width/height, 或类似的东西做一些事情，并将其应用于数字及其相关标签的组合。所以我会有一组天数（由脚本更改），然后是它下面的“天”一词。

如果有帮助，这就是我正在使用的内容：

http://jsfiddle.net/2P9qV/

有没有人有任何想法？我已经被难住了好几个星期了。

4

1 回答 1

0

好的，所以我终于想通了。幸运的是，我能够在一个 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

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

于 2013-11-11T15:11:27.323 回答