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"/>

<强>更新

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

vector-effect="non-scaling-vector"未得到一贯支持。我的Firefox和Safari版本不支持它，但我的Chrome浏览器支持它。
在SVG标准中，无法独立指定笔划的变换。（一个stroke-transform属性会很好 - 比如windows GDI +绘图系统，Pen对象有自己的局部转换）。

在此变化之前，我能想到的最好的解决方案是手动计算路径的坐标 - 即svg没有变换元素;坐标已经转换。