如何用CSS设置SVG线条的x1、x2、y1、y2属性以缩小图形

你可以通过两种CSS方式实现需求：一种是快速整体缩放，另一种是精准修改线条坐标属性来缩小图形。

方法1：用transform快速整体缩放 #

如果只需要整体缩小图形，直接给SVG添加缩放样式是最简单的方案，无需修改每条线条的坐标：

svg {
  /* 缩放到原尺寸的70%，数值小于1即为缩小 */
  transform: scale(0.7);
  /* 保持SVG容器大小不变，缩放中心居中 */
  transform-origin: center;
}

你的原SVG代码无需修改，直接配合上述CSS即可生效。

方法2：通过CSS修改线条坐标属性（精准调整） #

如果你需要直接修改y1/y2这类坐标属性来缩小图形，可通过以下两种方式实现：

方式A：类名+属性选择器调整坐标 #

先给SVG线条添加统一类名，再通过CSS定位每条线修改坐标：

<svg viewBox="0 0 24 24">
  <line class="horizontal-line" x1="0" y1="4" x2="24" y2="4" />
  <line class="horizontal-line" x1="0" y1="12" x2="24" y2="12" />
  <line class="horizontal-line" x1="0" y1="20" x2="24" y2="20" />
</svg>

/* 第一条线上移，缩小与中间线的间距 */
.horizontal-line:nth-child(1) {
  y1: 6;
  y2: 6;
}
/* 中间线保持居中位置 */
.horizontal-line:nth-child(2) {
  y1: 12;
  y2: 12;
}
/* 第三条线下移，缩小与中间线的间距 */
.horizontal-line:nth-child(3) {
  y1: 18;
  y2: 18;
}

通过调整线条的y坐标，三条线的纵向间距从8缩小到6，实现图形纵向缩小的效果。

方式B：CSS变量动态控制坐标 #

给SVG定义全局变量，线条引用变量后，直接通过CSS修改变量值即可调整所有线条坐标：

<svg viewBox="0 0 24 24" style="--line1-y: 4; --line2-y: 12; --line3-y: 20;">
  <line x1="0" y1="var(--line1-y)" x2="24" y2="var(--line1-y)" />
  <line x1="0" y1="var(--line2-y)" x2="24" y2="var(--line2-y)" />
  <line x1="0" y1="var(--line3-y)" x2="24" y2="var(--line3-y)" />
</svg>

svg {
  /* 修改变量值，收拢线条间距实现缩小 */
  --line1-y: 6;
  --line2-y: 12;
  --line3-y: 18;
}

这种方式无需改动SVG结构，仅通过CSS变量就能灵活调整所有线条的坐标位置。

注意：部分旧浏览器不支持直接用CSS覆盖SVG元素的y1/y2属性，若需兼容旧环境，优先选择transform方案或在SVG内部的<style>标签中编写样式。

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