如何用SVG线条替换HTML中的红绿横竖线条？

步骤1：移除原CSS线条代码 #

先找到原代码里生成绿色横线、红色交叉线的CSS规则（比如伪元素::before/::after、边框样式等），直接删除这些代码。

步骤2：插入SVG线条元素 #

根据原线条的位置和样式，在对应HTML位置插入SVG：

替换绿色横向线条

如果原绿色横线是贯穿容器的，添加如下SVG：

<svg class="green-horizontal-line" width="100%" height="2" viewBox="0 0 100 2" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="1" x2="100" y2="1" stroke="#00ff00" stroke-width="2" />
</svg>

用CSS调整间距（匹配原效果）：

.green-horizontal-line {
  display: block;
  margin: 10px 0;
}

替换红色横竖交叉线条

如果原交叉线是元素内的十字标记，添加如下SVG：

<svg class="red-cross-lines" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- 横向线条 -->
  <line x1="0" y1="10" x2="20" y2="10" stroke="#ff0000" stroke-width="1" />
  <!-- 纵向线条 -->
  <line x1="10" y1="0" x2="10" y2="20" stroke="#ff0000" stroke-width="1" />
</svg>

用CSS控制定位（匹配原布局）：

.red-cross-lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

步骤3：适配原布局细节 #

根据原CSS线条的定位、尺寸、间距等属性，微调SVG的CSS样式，确保视觉效果和原线条完全一致。

完整示例代码 #

<div class="container">
  <h2>示例标题</h2>
  <!-- 绿色横向SVG线条 -->
  <svg class="green-horizontal-line" width="100%" height="2" viewBox="0 0 100 2" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="1" x2="100" y2="1" stroke="#00ff00" stroke-width="2" />
  </svg>
  <div class="item">
    <!-- 红色交叉SVG线条 -->
    <svg class="red-cross-lines" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="10" x2="20" y2="10" stroke="#ff0000" stroke-width="1" />
      <line x1="10" y1="0" x2="10" y2="20" stroke="#ff0000" stroke-width="1" />
    </svg>
    <p>项目内容</p>
  </div>
</div>

.container {
  width: 400px;
  padding: 20px;
  border: 1px solid #ddd;
}

.item {
  position: relative;
  padding-left: 30px;
  margin-top: 15px;
}

.green-horizontal-line {
  display: block;
  margin: 15px 0;
}

.red-cross-lines {
  position: absolute;
  top: 5px;
  left: 0;
}

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