43

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

4

2 回答 2

53

编辑：

您可以将一个属性添加到您的矩形中以完全获得此行为：

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 呈现它，如您所示。

于 2012-04-27T20:24:04.730 回答
7

在后记中，描述路径和执行笔划是单独的事件，因此完全有可能拥有单独的“笔”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
于 2012-04-30T02:59:27.353 回答