2D渲染和SVG缩放

Question

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

为了测试我的算法，我选择使用SVG来显示结果。但我遇到了几个问题。

由于我的算法可能有非常不同的输入和输出，因此能够缩放查看生成的SVG文件是至关重要的！

但是，在SVG中，路径只能以一定的宽度显示。如果我放大缩小，则路径的宽度会变宽。我希望在所有缩放级别下，宽度都为1像素。是否有解决方案？

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

谢谢。

- libeako

Answer 1

许多其他矢量格式（如PostScript和PDF）允许您使用0的描边宽度来实现“发丝”描边，但SVG不行。然而，如果您使用百分比描边宽度，我认为您可以实现所需效果。有关详细信息，请参见w3c SVG规范，但基本上，您应该能够像这样做：

stroke-width:"1%"

这应该使用线宽的1%作为常数来描绘你的曲线，无论缩放级别如何都是如此。

至于点，SVG不支持它们。在过去我曾经用过PostScript，我总是使用带有小半径的弧线来绘制一个小圆（如果你愿意，你可以填充它以制成一个点）。

---

@Zoli：在你的评论之后，我正要建议你研究PostScript，这样你就可以使用毛细线描边宽度，但是当我遇到SVG规范中的非缩放描边向量效果时，我改变了主意：

vector-effect="non-scaling-stroke"

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

- Naaff

---

感谢提供向量效果属性，但它并不按照我想要的方式工作。它不能防止缩放，只能抵御SVG文档本身中的变换。但即使如此也不起作用，我认为这可能是SVG的一个较新的特性 - Mozilla Firefox可能不支持它。 - libeako

我相信这是SVG 1.2的一个特性，但它甚至支持移动和微型配置文件，因此任何SVG 1.2实现都应该支持它。从SVG规范的描述来看，它似乎也适用于缩放，因为它只是在设备上下文（即屏幕空间）中呈现。您尝试过其他SVG查看器以查看它在那里的工作方式吗？ - Naaff

如果一切顺利，这个功能应该会出现在Firefox 15中。 - Robert Longson

请考虑将答案缩减为非缩放描边部分。就我所见，它在Chrome和Firefox中都可以工作，因此这是一个很好的解决方案。 - pwnall

“non-scaling-stroke” 在 Firefox 90 或 Chromium 91 中完全无法工作！ - Mark Jeronimus

Answer 2

目前在SVG中没有像<point>元素或类似的东西，但是SVG WG已经讨论过添加它，所以它可能会在未来被包含。请随时向公共SVG邮件列表[e-mail]发表您对<point>元素的需求和要求。

一种解决方法是使用例如<line>元素，并使它们长度为零，如果需要可以使用圆形线帽使其显示为点。这完全取决于您需要什么。半径为0的圆可能更适合。

值为“non-scaling-stroke”的“vector-effect”属性是您应该用于指定描边不应缩放的属性。如果本地不支持“vector-effect”，则实现确保笔画正确缩放的JavaScript解决方案并不困难。Opera 9.5+本地支持它。

- Erik Dahlström

Answer 3

感谢Naaff的帮助。 我想我会继续使用Firefox，并且我会在生成的SVG文件中为每个算法执行指定线宽。这对我来说是足够的。

- libeako