笔划宽度不缩放；长宽比有问题吗? [英] stroke-width doesn't scale; aspect ratio problem?

问题描述

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

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.

问题在于，如果比例尺的宽高比发生较大变化，那么我最终会发现 path 的某些部分的权重要大得多，具体取决于它们的方向.

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)

在这种情况下，我最终将笔划宽度从9px更改为大约48px.靠近水平的线段末端较细，而靠近垂直的线段较粗.

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.

有没有一种简便的方法可以以所有具有相同渲染宽度的线段结尾?

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

推荐答案

您是否看过将vector-effect属性设置为non-scaling-stroke?

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

更新

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

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

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

• vector-effect="non-scaling-vector" is not consistently supported. My versions of Firefox and Safari do not support it, but my Chrome browser does.
• 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没有转换元素.坐标已经变换.

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.

这篇关于笔划宽度不缩放；长宽比有问题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！