能否为SVG应用斜切矩阵且不挤压线条宽度？

当然可以实现这个需求！你遇到的线条宽度被斜切挤压的问题，核心原因是SVG默认会把描边和路径形状一起应用变换矩阵。要解决这个问题，我们只需要把路径形状的变换和描边的缩放/斜切影响分开处理就行。下面给你两种实用的方法：

方法一：使用vector-effect: non-scaling-stroke（最推荐） #

这是最直接高效的方案，SVG的vector-effect属性里的non-scaling-stroke值专门用来解决这类问题——它会让描边的宽度始终保持你设置的绝对像素值，不受任何缩放、斜切、旋转等变换的影响，只会跟着路径的位置和角度变化，自身宽度完全不变形。

对比示例 #

先看没有使用该属性的斜切效果（线条被挤压）：

<svg width="200" height="200">
  <!-- 标准矩阵的矩形 -->
  <rect x="30" y="30" width="100" height="100" fill="none" stroke="black" stroke-width="4" transform="matrix(1,0,0,1,0,0)"/>
  <!-- 斜切矩阵的矩形，线条宽度被拉伸 -->
  <rect x="30" y="150" width="100" height="100" fill="none" stroke="black" stroke-width="4" transform="matrix(1,1,0,1,0,0)"/>
</svg>

再看添加vector-effect: non-scaling-stroke后的效果（线条宽度保持一致）：

<svg width="200" height="200">
  <!-- 标准矩阵的矩形 -->
  <rect x="30" y="30" width="100" height="100" fill="none" stroke="black" stroke-width="4" transform="matrix(1,0,0,1,0,0)"/>
  <!-- 斜切矩阵的矩形，线条宽度不变 -->
  <rect x="30" y="150" width="100" height="100" fill="none" stroke="black" stroke-width="4" transform="matrix(1,1,0,1,0,0)" vector-effect="non-scaling-stroke"/>
</svg>

这个属性的兼容性非常好，现在主流的Chrome、Firefox、Safari、Edge浏览器都支持，完全不用担心适配问题。

方法二：手动反向抵消描边变换（进阶场景） #

如果你需要更精细的控制（比如只针对部分变换抵消），可以把路径放在一个<g>标签里应用目标变换，然后给描边单独应用反向变换矩阵来抵消拉伸效果。这种方法需要你计算出原变换的逆矩阵，适合复杂自定义场景。

比如针对斜切矩阵matrix(1,1,0,1,0,0)，它的逆矩阵是matrix(1,-1,0,1,0,0)，示例代码如下：

<svg width="200" height="200">
  <g transform="matrix(1,1,0,1,0,0)">
    <!-- 内层矩形应用逆矩阵，抵消描边的斜切拉伸，同时保持路径形状被外层变换影响 -->
    <rect x="30" y="150" width="100" height="100" fill="none" stroke="black" stroke-width="4" transform="matrix(1,-1,0,1,0,0)"/>
  </g>
</svg>

不过这种方法相对繁琐，除非有特殊需求，否则还是推荐第一种方法。

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