SVG线条中能否使用calc()？固定与缩放元素布局问题咨询

其实SVG完全支持这种无需JavaScript的自适应需求！我来给你梳理下具体的实现思路和代码示例，帮你搞定固定居中盒子+随容器高度缩放的连接线。

核心是利用SVG自身的坐标系统和布局属性，不需要依赖JS就能实现你要的效果。关键要用到这几个特性：viewBox、preserveAspectRatio、百分比坐标，以及transform居中技巧。

1. 基础设置：让SVG适配容器尺寸 #

先给SVG设置以下属性，确保它能完全填满容器，并且坐标系统可以灵活映射到容器的实际尺寸：

<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
  <!-- 你的元素都放在这里 -->
</svg>

• width="100%" 和 height="100%"：让SVG完全继承容器的宽高
• viewBox="0 0 100 100"：定义一个0-100的百分比坐标空间，后续元素的位置可以用百分比来表示
• preserveAspectRatio="none"：关闭宽高比锁定，让SVG可以自由拉伸适配容器的任意宽高比，这对高度未知的场景至关重要

2. 实现带加号的盒子垂直居中 #

有两种常用方式让盒子保持垂直居中：

方式一：用百分比坐标固定位置 #

如果盒子的尺寸是相对SVG坐标的（比如百分比），直接用百分比定位即可：

<!-- 居中的加号盒子 -->
<rect x="40" y="45" width="20" height="10" fill="#fff" stroke="#000" stroke-width="2"/>
<line x1="50" y1="45" x2="50" y2="55" stroke="#000" stroke-width="2"/>
<line x1="45" y1="50" x2="55" y2="50" stroke="#000" stroke-width="2"/>

这里盒子的y坐标设为45，高度10，刚好落在整个SVG的垂直中点（50%）位置，不管容器高度怎么变，都会保持居中。

方式二：用transform实现固定尺寸盒子的居中 #

如果盒子是固定像素尺寸（比如你需要它大小不变），可以用transform先把坐标系移到容器中心，再回移盒子自身的一半尺寸，完美居中：

<g transform="translate(50%, 50%)">
  <!-- 盒子向左上偏移自身一半尺寸，实现中心对齐 -->
  <rect x="-20" y="-15" width="40" height="30" fill="#fff" stroke="#000" stroke-width="2"/>
  <line x1="0" y1="-15" x2="0" y2="15" stroke="#000" stroke-width="2"/>
  <line x1="-10" y1="0" x2="10" y2="0" stroke="#000" stroke-width="2"/>
</g>

3. 让连接线随容器高度自动缩放 #

配合上面的居中盒子，用百分比或calc来定义连接线的端点，就能让线的长度随容器高度变化自动调整：

对应相对尺寸盒子的连接线 #

<!-- 顶部连接线：从容器顶部到盒子上边缘 -->
<line x1="50" y1="0" x2="50" y2="45" stroke="#000" stroke-width="2"/>
<!-- 底部连接线：从盒子下边缘到容器底部 -->
<line x1="50" y1="55" x2="50" y2="100" stroke="#000" stroke-width="2"/>

对应固定尺寸盒子的连接线 #

如果盒子是固定像素高度，用calc计算线的端点位置：

<!-- 顶部连接线：从容器顶部到盒子上边缘 -->
<line x1="50" y1="0" x2="50" y2="calc(50% - 15px)" stroke="#000" stroke-width="2"/>
<!-- 底部连接线：从盒子下边缘到容器底部 -->
<line x1="50" y1="calc(50% + 15px)" x2="50" y2="100" stroke="#000" stroke-width="2"/>

这里的15px是盒子高度（30px）的一半，确保线刚好连接到盒子的边缘。

完整示例代码 #

把这些组合起来，就是一个完整的自适应SVG：

<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
  <!-- 顶部连接线 -->
  <line x1="50" y1="0" x2="50" y2="calc(50% - 15px)" stroke="#000" stroke-width="2"/>
  <!-- 底部连接线 -->
  <line x1="50" y1="calc(50% + 15px)" x2="50" y2="100" stroke="#000" stroke-width="2"/>
  <!-- 居中的加号盒子 -->
  <g transform="translate(50%, 50%)">
    <rect x="-20" y="-15" width="40" height="30" fill="#fff" stroke="#000" stroke-width="2"/>
    <line x1="0" y1="-15" x2="0" y2="15" stroke="#000" stroke-width="2"/>
    <line x1="-10" y1="0" x2="10" y2="0" stroke="#000" stroke-width="2"/>
  </g>
</svg>

只要把这个SVG放到你的容器里，不管容器高度怎么变化，连接线都会自动拉伸，加号盒子始终保持垂直居中，完全不需要JavaScript！

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