如何使笔画宽度不受当前变换矩阵的影响 [英] 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.

缺少这一点，我想我不必将我的 CTM 告诉 SVG，而是自己转换坐标，这意味着将像 rect 这样的原语转换为它们的 path 等价物.

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.

推荐答案

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

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屋！