笔划宽度不缩放; 长宽比问题？

Question

我在g元素中有一个或多个路径元素,我正在缩放以适应网格矩形.变换应用于g元素.我的变换的作用是所有的点最终都在正确的位置,但我发现我必须调整路径的笔触宽度以获得可读的线.

问题在于,如果比例涉及纵横比的大幅度变化,我最终会认为路径的某些部分比其他部分重,这取决于它们的方向.

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

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

在这种情况下,我最终将笔划宽度从9px更改为大约48px.靠近水平端的区域较薄,靠近垂直区域的区域较厚.

是否有任何简单的方法可以结束具有相同渲染宽度的所有线段？

Answer 1

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

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

UPDATE

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

vector-effect="non-scaling-vector"不一贯支持.我的Firefox和Safari版本不支持它,但我的Chrome浏览器支持它.
在SVG标准中,无法独立地指定笔划的变换.(stroke-transform属性会很好 - 就像windows GDI +绘图系统一样,Pen对象有自己的局部转换).

在这种情况发生变化之前,我能想到的最好的解决方案是手动计算路径的坐标 - 即svg没有变换元素; 坐标已经转换.