svg基础变形 transform 之 skewX skewY

马黑黑

svg基础变形 transform 之 skewX skewY

倾斜也被叫做扭曲、斜切等，实际上就是倾斜，形变对象倾斜之后会扭曲，看上去也像是被斜切了。不像CSS，svg的没有独立的skew属性，倾斜形变属性被分开为 skewX 和 skewY 两种，可以单独使用，也可以并列在一起使用：

transform="skewX(15)" <-- 沿X轴倾斜15度（svg不要单位，CSS需要表示为 15deg，下同） -->
transform="skewY(15)" <-- 沿Y轴倾斜15度 -->
transform="skewX(15) skewX(15)" <-- 沿X轴、Y轴都倾斜15度 -->

skewX(15) skewY(15) skewX(15) skewY(15) 【 强制形变基点为矩形中心 】

为方便比较，我在下面制作一组CSS+HTML（div）的skew倾斜示例，CSS的 skew、skewX 和 skewY 形变基点默认取形变对象中心的坐标值。

skewX(15deg) skewY(15deg) skew(15,15deg)

通过比较，应该能发现svg和CSS的倾斜变形行为表现不尽一致，原因是svg的倾斜以svg画布左上角为基点、CSS则以元素（例中使用的是div）自身的中心为倾斜基点；但二者的倾斜姿势则完全一样——为了验证这一点，可以勾选svg倾斜示例的复选按钮再进行比较。

马黑黑

至此，svg基础变形介绍完了：它们分别是——

① translate
② rotate
③ scale
④ skewX、skewY

红影

这个在线演示真好，可以很直观地进行两者比较了

红影

当强制设置变形基点为矩形中心时，和CSS是一样的效果呢。

马黑黑

红影 发表于 2023-11-18 14:41
当强制设置变形基点为矩形中心时，和CSS是一样的效果呢。

它们毕竟同源，仅是基点不同

马黑黑

红影 发表于 2023-11-18 14:40
这个在线演示真好，可以很直观地进行两者比较了

红影

马黑黑 发表于 2023-11-18 18:26
它们毕竟同源，仅是基点不同

是的，这样比较着，就更清楚了。

红影

马黑黑 发表于 2023-11-18 18:26

现在看来，差不多css里有的，svg也都有呢。

马黑黑

红影 发表于 2023-11-19 13:20
现在看来，差不多css里有的，svg也都有呢。

svg没有那么多元素，只是每一个元素的属性都可能很多。CSS是借鉴很多能用的东东，将来的版本估计可能还要强大

马黑黑

红影 发表于 2023-11-19 13:20
是的，这样比较着，就更清楚了。

不糊涂就清楚

红影

马黑黑 发表于 2023-11-19 19:42
svg没有那么多元素，只是每一个元素的属性都可能很多。CSS是借鉴很多能用的东东，将来的版本估计可能还要 ...

应该是，看好svg.

红影

马黑黑 发表于 2023-11-19 19:42
不糊涂就清楚

学到清楚了，就不会糊涂

马黑黑

红影 发表于 2023-11-19 23:10
应该是，看好svg.

现在，svg一是做img或background图形应用于HTML中，二是嵌入HTML使用

马黑黑

红影 发表于 2023-11-19 23:12
学到清楚了，就不会糊涂

应该这样

红影

马黑黑 发表于 2023-11-19 23:14
现在，svg一是做img或background图形应用于HTML中，二是嵌入HTML使用

这两种黑黑都演示过。

红影

马黑黑 发表于 2023-11-19 23:15
应该这样

各种变形找准参照，就没问题。

马黑黑

红影 发表于 2023-11-20 15:56
各种变形找准参照，就没问题。

是的

马黑黑

红影 发表于 2023-11-20 15:55
这两种黑黑都演示过。

是的

马黑黑

红影 发表于 2023-11-19 23:12
学到清楚了，就不会糊涂

那就是清楚

红影

马黑黑 发表于 2023-11-20 19:29
是的

这个需要脑子清楚。