【问题标题】:How to make stroke width immune to the current transformation matrix如何使笔划宽度不受当前变换矩阵的影响
【发布时间】:2012-05-08 14:16:37
【问题描述】:

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

【问题讨论】:

标签: svg postscript coordinate-transformation


【解决方案1】:

编辑:

您可以将一个属性添加到您的 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 会按照您显示的方式呈现它。

【讨论】:

  • 有趣,但我认为 Chrome 是正确的。 SVG (1.1) 规范说首先应用 transform 属性并且 等效于
  • 是的,我认为你是对的 - 这意味着我的答案行不通,因为我在 Inkscape 而不是 Chrome 中测试了它。
  • 好的,我找到了更好的答案here
  • 请注意,Firefox 目前 (v12) 不支持 vector-effect:non-scaling-stroke
  • 谢谢@Russell。我没有检查 SVG 1.2。
【解决方案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

【讨论】:

  • 在 EPS 中为我​​的目的工作。在redbook 中查找setmatrix。 (删除 tour de force 编码艺术)。
猜你喜欢
  • 1970-01-01
  • 2016-09-29
  • 1970-01-01
  • 1970-01-01
  • 2015-10-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-25
相关资源
最近更新 更多