svg 线上的反向倾斜变换

Question

我试图在垂直线上应用 skewX 变换，但看起来无论我如何设置 y1 和 y2，倾斜角度总是从“上方”坐标开始。有没有办法控制这个倾斜角度，即从“下方”开始？

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

line {
    stroke: green;
    stroke-width: 3;
}

<svg>
  <line x1="200" y1="200" x2="200" y2="100" style="transform: skewX(7deg);"></line>
</svg>

Answer 1

起源在这里真的很重要。作为起点（没有有意的点），原点位于 0,0。所以，然后你将一条倾斜的线与一条不倾斜的线进行比较，看起来很奇怪：

svg {
    border: thin solid black;
}

<svg width="300" height="300" stroke-width="10">
  <line x1="200" y1="200" x2="200" y2="100" stroke="red" transform="skewX(7)"/>
  <line x1="200" y1="200" x2="200" y2="100" stroke="green"/>
</svg>

如果让两条线从 0,0（原点）开始，您可以看到它们在顶部重叠。这比第一个例子更有意义。

svg {
    border: thin solid black;
}

<svg width="300" height="300" stroke-width="10">
  <g transform="translate(200 100)">
    <line x1="0" y1="0" x2="0" y2="100" stroke="red" transform="skewX(7)"/>
    <line x1="0" y1="0" x2="0" y2="100" stroke="green"/>
  </g>
</svg>

有了这些知识，就不容易看出您需要移动原点了。现在从后面读取以下变换属性 (

transform="translate(0 100) skewX(7) translate(0 -100)"

)：将原点移动到线的底部，倾斜它，然后再次将线拉回来。

svg {
  border: thin solid black;
}

<svg width="300" height="300" stroke-width="10">
  <g transform="translate(200 100)">
    <line x1="0" y1="0" x2="0" y2="100" stroke="red"
      transform="translate(0 100) skewX(7) translate(0 -100)"/>
    <line x1="0" y1="0" x2="0" y2="100" stroke="green"/>
  </g>
</svg>