如何将SVG中从左到右绘制的两条线条改为从右到左？

要让线条从右到左绘制，只需调整<line>元素的起点（x1）和终点（x2）坐标，让起点位于SVG视口的右侧，终点向左侧延伸即可。以下是修改后的完整代码：

CSS（无需调整） #

.separator {
    height: 1.25rem;
    width: 100%;
    max-width: unset;
    margin: 0;
    display: block;
}

修改后的SVG代码 #

<svg class="separator" preserveAspectRatio="none" viewBox="0 0 869 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 第一条线：从视口最右侧(x=869)向左延伸269单位，与原线条长度一致 -->
  <line opacity="0.3" x1="869" y1="20.5" x2="600" y2="20.5" stroke="#4EF4CB"></line>
  <!-- 第二条线：从视口最右侧(x=869)向左延伸1073单位，与原线条长度一致 -->
  <line opacity="0.3" x1="869" y1=".5" x2="-204" y2=".5" stroke="#4EF4CB"></line>
</svg>

核心修改逻辑 #

原线条默认x1=0（视口最左侧），x2为正数，因此是从左到右延伸。修改时：

1. 将x1设为视口的最大X值（869，对应viewBox="0 0 869 21"的右边界）
2. 计算x2 = 869 - 原x2值，确保线条长度和原效果一致：
   • 第一条线：869 - 269 = 600
   • 第二条线：869 - 1073 = -204
3. 保留preserveAspectRatio="none"，确保SVG自适应容器宽度，翻转后的线条依然保持原有的拉伸效果。

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