如何使描边宽度不受当前变换矩阵的影响？ (关于 IT 技术)

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等价物。

- xan

---

绘制一条线，当图像拉伸时不会变粗 - Erik Dahlström

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

- Russell Zahniser

---

有趣的是，我认为Chrome是正确的。SVG（1.1）规范指出，transform属性首先应用，<rect ... transform...>等同于<g transform...><rect .../></g>。 - xan

好的，我在这里找到了更好的答案 链接。 - Russell Zahniser

请注意，Firefox目前（v12）不支持vector-effect:non-scaling-stroke。 - Phrogz

谢谢，@Russell。我还没有检查过SVG 1.2。 - xan

非缩放描边支持应该出现在Firefox 15中。它现在已经在夜间构建中了。 - Robert Longson

Answer 2

在后台处理中，路径的描述和描边是不同的事件，因此完全可以有一个独立的“笔”TM。

%!PS
%A Funky Shape

matrix currentmatrix %save normal matrix for stroke pen
306 396 translate
72 72 scale
1 1 5 { pop
    360 5 div rotate
    1 0 translate
    0 0 moveto
    1 1 5 { pop
        360 5 div rotate
        1 0 translate
        1 0 lineto
        -1 0 translate
    } for
    -1 0 translate
    closepath
} for
setmatrix
[ 1 -3 4 2 0 0 ] concat %put some skew in the pen
10 rotate     %makes it look more "organic"
stroke
showpage

- luser droog

---

在 EPS 中对我的目的起了作用。在 redbook 中查找了 setmatrix。（去掉 tour de force 编码艺术）。 - Owain Evans