笔划宽度不规模;长宽比问题?

I have one or more path elements inside a g element that I am scaling to fit inside a grid rectangle. The transform is applied to the g element. My transform works in that all the points end up at the right places, but I discovered that I have to adjust the stroke-width of the path to get a readable line.

我在一个g元素中有一个或多个路径元素，我正在缩放它以适应一个网格矩形。转换应用于g元素。我的转换工作在所有的点都在正确的地方结束，但是我发现我必须调整路径的笔划宽度来得到可读的线。

The problem is that if the scale involves a large shift in the aspect ratio, I end up with some segments of the path being heavier weight than others, depending on their orientation.

问题是，如果比例涉及宽高比的大变化，我最终会得到路径的某些部分比其他部分更重，这取决于它们的方向。

Here is a typical transform that my code computed:

下面是我的代码计算的一个典型转换:

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

In this case I end up changing the stroke-width from 9px to about 48px. Segments close to the horizontal end up thin, those close to the vertical are thick.

在这种情况下，我结束了从9px到48px的笔触宽度。靠近水平线的线段变薄，靠近垂直线的线段变厚。

Is there any easy way to end with all the segments with the same rendered width?

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

1 个解决方案

#1

Have you looked at setting the vector-effect attribute to non-scaling-stroke?

您是否考虑过将矢量效应属性设置为非缩放操作?

 <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

http://www.w3.org/TR/SVGTiny12/painting.html NonScalingStroke

UPDATE

更新

The best solution I can think of is to manually transform the coordinates of your path.

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

vector-effect="non-scaling-vector" is not consistently supported. My versions of Firefox and Safari do not support it, but my Chrome browser does.
矢量效应=“非标量矢量”不被一致支持。我的Firefox和Safari版本不支持它，但是我的Chrome浏览器确实支持它。
In the SVG standard there is no way of specifying a transformation for the stroke independantly. (A stroke-transform attribute would be nice - like the windows GDI+ drawing system, where a Pen object has it's own local transformation).
在SVG标准中，没有方法可以独立地指定一个转换。(一个stroke-transform属性会很不错——就像windows GDI+绘图系统一样，笔画对象有自己的本地转换)。

Until this changes, the best solution I can think of is to manually work out the coordinates of your path - that is the svg has no transform elements; the coordinates are already transformed.

在此更改之前，我能想到的最佳解决方案是手工计算路径的坐标——即svg没有转换元素;坐标已经被变换。

#1