笔画宽度不缩放；长宽比问题？答案

【问题标题】：stroke-width doesn't scale; aspect ratio problem?笔画宽度不缩放；长宽比问题？
【发布时间】：2011-05-30 15:34:14
【问题描述】：

我在 g 元素中有一个或多个 path 元素，我将其缩放以适应网格矩形。转换应用于 g 元素。我的 transform 的工作原理是所有点都位于正确的位置，但我发现我必须调整路径的 stroke-width 才能获得可读的线条。

问题在于，如果比例涉及纵横比的较大变化，我最终会得到路径的某些部分比其他部分更重，具体取决于它们的方向。

这是我的代码计算的典型转换：

 scale(0.1875, -0.010397820616798718) translate(-1149000, -96174)

在这种情况下，我最终将 stroke-width 从 9px 更改为大约 48px。接近水平的部分最终变薄，接近垂直的部分变厚。

有没有什么简单的方法可以让所有的段都以相同的渲染宽度结束？

【问题讨论】：

标签： svg

【解决方案1】：

您是否考虑过将矢量效果属性设置为非缩放笔触？

 <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5" 
        x1="32" y1="50" x2="32" y2="350"/>

更新

我能想到的最佳解决方案是手动转换路径坐标。

vector-effect="non-scaling-vector" 始终不受支持。我的 Firefox 和 Safari 版本不支持，但我的 Chrome 浏览器支持。
在 SVG 标准中，无法单独指定笔划的转换。（一个 stroke-transform 属性会很好 - 就像 windows GDI+ 绘图系统，其中 Pen 对象有它自己的本地变换）。

在这种情况发生变化之前，我能想到的最佳解决方案是手动计算路径的坐标——即 svg 没有变换元素；坐标已经转换了。

【讨论】：

我确实看过这个，因为它在另一个 stackoverflow 线程中被提及。它似乎在 Firefox 4 中不起作用。我希望它可以让生活更轻松。矢量效果似乎是 TinySVG 规范的一个特性，而不是浏览器实现的常规 SVG 1.1 规范。我可以理解他们为什么要添加这一点，因为缩放绘图在分辨率有限的移动设备上是一个大问题。具有讽刺意味的是，TinySVG 最终会具有常规 SVG 所没有的功能。
Gareth 我怀疑你是对的。我希望让 SVG 实现为我做转换，但我想这太好了，难以置信。我会将您的答案标记为已接受的答案，因为这是我将要做的，但对于原始问题的解决方案仍然有好处。
非缩放笔画支持应该出现在 Firefox 15 中，一切正常，它刚刚登陆夜间构建