HTML SVG时钟等比例自适应缩放异常问题咨询

问题根因 #

缩放失效核心为两点：1. SVG未定义viewBox属性，无法建立独立坐标系统实现等比缩放；2. 文本使用rem单位相对根元素字体大小，不会随SVG缩放同步变化。 #

修改步骤 #

步骤1：修改SVG标签 #

找到原代码中的<svg>标签，替换为：

<svg viewBox="0 0 380 480" preserveAspectRatio="xMidYMid meet">

viewBox参数对应你原有元素的整体坐标范围，preserveAspectRatio保证缩放时等比不变形。

步骤2：修正SVG样式 #

找到CSS中的svg样式块，修改为：

svg {
  position: relative;
  width: 100%;
  height: 100%;
}

原position: auto为无效属性，替换为relative即可。

步骤3：修改文本单位适配缩放 #

找到CSS中三个文本样式，替换为px单位：

.dayText {
  font-size: 27px;
}

.dateText {
  font-size: 40px;
  font-weight: 400;
}

.timeText {
  font-family: "Open Sans";
  font-size: 80px;
  font-weight: 600;
  fill: White;
}

适配侧边栏用法 #

修改完成后，只需给时钟套一层自定义尺寸的外层容器即可，示例：

<div style="width: 25%; height: 100vh; position: fixed; left: 0; top: 0;">
  <!-- 此处放修改后的完整时钟代码 -->
</div>

所有原有时间更新、动画逻辑完全不受影响，外层容器尺寸变化时时钟会自动等比适配。

内容的提问来源于stack exchange，提问作者RafaNHS