如何创建与SVG容器等大的十字形？现有SVG缩放后线条长度无法自适应

这个问题我太熟悉啦！你现在的问题出在代码里的线条坐标都是硬写死的固定像素值——比如x2="10"、y1="5"这些，当你修改SVG的宽高时，这些数值不会自动跟着更新，所以线条长度自然没法适配新尺寸。咱们来调整一下，让加号能自动跟着容器大小走：

方案1：用百分比坐标直接适配（最简单） #

直接把线条的坐标换成百分比，这样它们会自动对应SVG容器的宽高，不需要额外配置：

<svg width="10px" height="10px">
  <!-- 水平线：从容器左侧边缘延伸到右侧边缘，垂直居中 -->
  <line class="point" x1="0" x2="100%" y1="50%" y2="50%" />
  <!-- 垂直线：从容器顶部边缘延伸到底部边缘，水平居中 -->
  <line class="point" x1="50%" x2="50%" y1="0" y2="100%" />
</svg>

现在你随便修改<svg>标签里的width和height值（比如改成width="30px" height="20px"），两条线都会自动延伸到容器的对侧中点，完美适配新尺寸。

方案2：用viewBox保持加号比例（适合需要固定形状比例的场景） #

如果希望加号始终保持对称的比例（比如宽高相等时是正加号，宽高不等时线条依然居中且比例协调），可以给SVG加上viewBox属性，定义一个内部的坐标系统：

<svg width="10px" height="10px" viewBox="0 0 100 100">
  <line class="point" x1="0" x2="100" y1="50" y2="50" />
  <line class="point" x1="50" x2="50" y1="0" y2="100" />
</svg>

这里viewBox="0 0 100 100"定义了SVG内部的坐标系范围是从(0,0)到(100,100)，不管外面的width和height怎么改，内部的100单位都会自动缩放匹配容器尺寸。比如你把width改成50px，内部的100单位就会对应50px，线条自然就跟着放大了。

额外小技巧 #

如果需要给线条加样式（比如颜色、粗细），可以给.point类写CSS：

.point {
  stroke: #000; /* 线条颜色 */
  stroke-width: 2; /* 线条粗细 */
  fill: none; /* 去掉默认填充（线条不需要填充） */
}

这样不管容器怎么变，加号的样式也能保持一致~

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