svg 线上的反向倾斜变换-解网

问：

我正在尝试在垂直线上应用 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>

css svg css-transforms

在 SVG 中添加第二行未被转换，然后通过浏览器开发工具应用于第一行，并将第二个值 100% 更改为更多或更少 - 看看这条线现在如何移动，关于静态“克隆”？如果这不是你所要求的，那么你真的需要给出一个更好的解释，到底是什么。transform-origin: 50% 100%;

答：

1赞 chrwahl 10/21/2023 #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 属性（）：将原点移动到线的底部，将其倾斜，然后再次将线向后移动。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>

上一个：Angular Material Drag and Drop - 使用样式转换时拖动错误的项目

下一个：IntersectionObserver 和 transform：转换不可预知的行为

svg 线上的反向倾斜变换

Reverse skew transform on svg line

评论