stroke-width doesn't scale; aspect ratio problem?
我要缩放以适合网格矩形的g元素中有一个或多个path元素。 变换将应用于g元素。 我的变换的工作原理是所有点都在正确的位置结束，但是我发现必须调整路径的笔触宽度才能获得可读的线。
问题是，如果比例尺涉及到宽高比的较大变化，则根据路径的方向，我最终会发现路径的某些部分比其他部分的权重更大。
这是我的代码计算的典型转换：
1 | scale(0.1875, -0.010397820616798718) translate(-1149000, -96174) |
在这种情况下，我最终将笔划宽度从9px更改为约48px。 靠近水平的线段末端较细，靠近垂直的线段较粗。
有没有一种简单的方法可以以所有具有相同渲染宽度的线段结尾？
您是否考虑过将vector-effect属性设置为non-scaling-stroke？
1 2 | <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5" x1="32" y1="50" x2="32" y2="350"/> |
http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
更新
我能想到的最好的解决方案是手动转换路径的坐标。
-
始终不支持
vector-effect="non-scaling-vector" 。 我的Firefox和Safari版本不支持，但是我的Chrome浏览器支持。 - 在SVG标准中，无法单独指定笔划的变换。 (笔触变换属性会很好-就像Windows GDI +绘图系统一样，其中Pen对象具有它自己的局部变换)。
在此变化之前，我能想到的最佳解决方案是手动计算路径的坐标-也就是说svg没有转换元素。 坐标已经转换。