如何控制SVG垂直线skewX变换的倾斜方向，实现反向倾斜？

你遇到的问题是因为SVG元素的变换原点默认不是你要的下端点，而是元素的中心位置。要让倾斜从下端坐标开始，只需要调整变换原点就行，下面是具体方法：

方案1：把变换原点设为直线下端点 #

直接指定transform-origin为直线的下端点坐标(200,200)，这样skewX就会围绕这个点倾斜：

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

line {
    stroke: green;
    stroke-width: 3;
    transform-origin: 200px 200px; /* 对应直线下端点x1,y1的位置 */
    transform: skewX(7deg);
}

对应的SVG代码：

<svg>
  <line x1="200" y1="200" x2="200" y2="100"></line>
</svg>

方案2：反向倾斜（如果需要往另一侧歪） #

要是你想让直线从下端点往相反方向倾斜，把skewX的角度改成负值就行：

line {
    stroke: green;
    stroke-width: 3;
    transform-origin: 200px 200px;
    transform: skewX(-7deg);
}

原因说明 #

SVG里元素的transform-origin默认是元素自身的中心。你这条垂直线的范围是从y=100到y=200，中心在y=150的位置，所以默认skewX是围着这个中心转，看起来就像是从上头开始歪。把原点改到下端点后，倾斜就会以这个点为基准，自然就符合你的需求了。

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