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

Posted 2023-02-23

【中文标题】使用 SVG 进行 2D 渲染和放大

【英文标题】：2D rendering and zooming in with SVG

【发布时间】：2010-11-05 14:22:29

【问题描述】：

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

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

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

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

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

谢谢

【参考方案1】：

许多其他矢量格式（如 PostScript 和 PDF）允许您使用 0 的笔画宽度来表示“细线”笔画。 SVG 并非如此。但是，我认为如果您使用百分比笔画宽度，您可以达到您想要的效果。请参阅the w3c SVG specifications for details，但基本上，您应该能够执行以下操作：

stroke-width:"1%"

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

至于点，SVG 不支持它们。当我过去这样做时（使用 PostScript），我总是使用 arc with a small redius 来画一个小圆圈（如果你愿意，你可以填充它来形成一个点）。

---

@Zoli：在您发表评论后，我正要建议您查看 PostScript，以便在遇到 non-scaling-stroke vector-effect in the SVG specification 时使用细线描边宽度：

vector-effect="non-scaling-stroke"

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

【讨论】：

使用 % ：缩放也加宽了线条。

感谢矢量效果属性，但它不能按我的意愿工作。它不防御缩放，只防御 svg 文档本身的变换。但即使这样也不起作用，我认为因为这可能是 SVG 的一个太新的功能 - Mozilla Firefox 可能不支持它。

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

我做了一些测试，Firefox 似乎不支持非缩放笔画。然而，我测试了一个名为 GPAC 的程序，它支持 SVG 1.2，它似乎可以按照你的意愿工作，但它是面向动画和媒体的。所以我希望你需要一个兼容 SVG 1.2 的查看器来获得你想要的效果。

我还没有尝试过任何其他 SVG 查看器。我通常会尝试坚持使用免费软件，这就是我放弃 GPAC 的原因。我将等待 Firefox 的下一个版本（3.5），并尝试使用它的矢量效果属性。

【参考方案2】：

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

【参考方案3】：

目前在 SVG 中没有 元素或类似的东西，但在 SVG WG 中已经讨论过添加它，因此它可能会在未来包含在内。随时向公共 svg 邮件列表表达您对 元素的需求和要求：[e-mail]。

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

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