在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
等价物。
答案 0 :(得分:43)
修改强>
您可以将一个属性添加到rect中以获得完全相同的行为:
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会按照您的显示进行渲染。
答案 1 :(得分:6)
在后记中,描述路径和执行笔划是单独的事件,因此完全有可能有一个单独的笔&#34; 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