如何使笔划宽度不受当前变换矩阵的影响 [英] How to make stroke width immune to the current transformation matrix

问题描述

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

In SVG (and Canvas, Quartz, Postscript, ...), the transformation matrix affects both the path coordinates and the line width. Is there a way to make an adjustment so the line width is not affected? That is, in the following example, the scale is different for X and Y, which makes the square into a rectangle, which is OK, but it also makes the lines wider on two sides.

  <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转换为圆形的椭圆形，但是我看不到类似的东西。

I can see that would be useful in many cases, but is there a way to opt out of it? I suppose I would like to have a separate pen TM or be able to set the pen to be an ellipse that the CTM converts into a circle, but I don't see anything like that.

缺少这一点，我想我不必告诉SVG我的CTM，而是自己转换坐标，这意味着将 rect 之类的原语转换为它们的路径等效项。

Lacking that, I think I have to not tell SVG about my CTM and instead transform the coordinates myself, which means converting primitives like rect to their path equivalents.

推荐答案

编辑：

有一个属性可以添加到您的rect中，以完全实现此行为：

There is an attribute you can add to your rect to get exactly this behavior:

vector-effect="non-scaling-stroke"

这是错误的：

如果将变换直接应用于形状而不是应用于形状所在的组，这将起作用。当然，如果要对多个项目进行分组并缩放

This will work if you apply the transform directly to the shape, not the group it is in. Of course, if you wanted to group several items and scale them all together, that approach won't work.

<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会按照您显示的方式呈现它。

This may also depend on your SVG viewer; Inkscape renders your file the way you want (stroke width not affected by scale) but Chrome renders it as you have shown.

这篇关于如何使笔划宽度不受当前变换矩阵的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！