svg - 如何使笔划宽度不受当前变换矩阵的影响

Question

在 SVG(以及 Canvas、Quartz、Postscript...)中，变换矩阵会影响路径坐标和线宽。有没有办法进行调整以使线宽不受影响？也就是说，在下面的示例中，X 和 Y 的比例不同，这使得正方形变成了矩形，这是可以的，但也会使两侧的线条变宽。

  <g transform="rotate(30) scale(5,1) ">
      <rect x="10" y="10" width="20" height="20" 
            stroke="blue" fill="none" stroke-width="2"/>
  </g>

我发现这在很多情况下都很有用，但是有没有办法选择退出呢？我想我想要一个单独的笔 TM 或者能够将笔设置为椭圆形，CTM 将其转换为圆形，但我没有看到类似的东西。

缺少这一点，我想我不必告诉 SVG 我的 CTM，而是自己转换坐标，这意味着将 rect 等基元转换为它们的 path 等效项。

Answer 1

编辑:

您可以将一个属性添加到您的矩形中以获得确切的行为:

vector-effect="non-scaling-stroke"

这是错误的:

如果您将变换直接应用于形状而不是其所在的组，则此方法将起作用。当然，如果您想将多个项目分组并将它们全部缩放到一起，则该方法将不起作用。

<rect x="10" y="10" width="20" height="20" 
            stroke="blue" fill="none" stroke-width="2"
            transform="rotate(30) scale(5,1)"/>

这也可能取决于您的 SVG 查看器； Inkscape 按您想要的方式呈现您的文件(描边宽度不受比例影响)，但 Chrome 会按您所示的方式呈现它。