path - 使用 SVG 进行 2D 渲染和放大

Question

我的任务是开发一种算法，将不同类型的曲线拟合到二维空间中的给定点序列上。

为了能够测试我的算法，我选择了 SVG 来显示结果。我有几个问题。

由于我的算法可能有非常不同的输入和输出，因此我必须能够放大查看生成的 SVG 文件！

但是SVG中的路径只能以一定的宽度显示。如果我放大，那么路径的宽度会越来越宽。我希望所有缩放级别的宽度都为 1 像素。有解决方案吗？

另外：SVG可以显示点吗？是的，简单，原始点。？我发现它不能。

谢谢

Answer 1

许多其他矢量格式（如 PostScript 和 PDF）将允许您使用 0 的笔画宽度作为“细线”笔画。SVG 并非如此。但是，我认为如果您使用百分比笔画宽度，您可以实现您想要的。有关详细信息，请参阅w3c SVG 规范，但是，基本上，您应该能够执行以下操作：

stroke-width:"1%"

无论缩放级别如何，这应该以恒定 1% 的边界矩形的线宽来描边您的曲线。

至于点，SVG 不支持它们。当我过去这样做时（使用 PostScript），我总是使用带有小半径的圆弧来绘制一个小圆圈（如果你愿意，你可以填充它来制作一个点）。

---

@Zoli：在您发表评论后，我正要建议您查看 PostScript，以便当我遇到SVG 规范中的非缩放笔划矢量效果时，您可以使用细线笔划宽度：

vector-effect="non-scaling-stroke"

根据规范，只需将其添加到您的曲线中，它就应该不受缩放的影响。他们的示例使用line，但它也应该适用于您的曲线。

Answer 2

目前 SVG 中没有 <point> 元素或类似的元素，但在 SVG WG 中已经讨论过添加该元素，因此将来可能会包含它。随时向公共 svg 邮件列表表达您对 <point> 元素的需求和要求：www-svg@w3.org。

一种解决方法是使用例如 <line> 元素并让它们的长度为零，如果您愿意，可以使用圆形线帽使其显示一个点。这一切都取决于你需要这个。r=0 的圆可能更合适。

具有“非缩放笔划”值的“矢量效果”属性是您应该用来表示笔划不应该缩放的属性。如果原生不支持“矢量效果”，实现一个确保笔画正确缩放的 javascript 解决方案并不难。Opera 9.5+ 原生支持它。

Answer 3

谢谢纳夫的帮助。我想我会留在 firefox，我会为每个算法执行指定生成的 svg 文件中的行宽。这对我来说已经足够了。