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

时间:2009-06-24 17:13:29

标签: path svg point zooming

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

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

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

但SVG中的路径只能以一定的宽度显示。如果我放大,那么路径的宽度会变宽。我希望宽度在所有缩放级别为例如1像素。有解决方案吗?

另外:SVG可以显示点吗?是的,简单,原始点。我发现它不能。

感谢

3 个答案:

答案 0 :(得分:8)

许多其他矢量格式(如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,但它也适用于您的曲线。

答案 1 :(得分:1)

没有< point>当前SVG中的元素或类似内容,但SVG WG中已经讨论过添加,因此将来可能会包含它。随意发表您对< point>的需求和要求。公共svg邮件列表的元素:www-svg@w3.org。

解决方法是使用例如< line>元素,让它们的长度为零,如果你想要你可以有圆形的线条,使它显示一个点。这一切都取决于你需要什么。 r = 0的圆可能更适合。

值为'non-scaling-stroke'的'vector-effect'属性是你应该用来说中风不应该缩放的。如果本地不支持“矢量效果”,那么实现一个确保笔划正确缩放的javascript解决方案并不困难。 Opera 9.5+原生支持它。

答案 2 :(得分:0)

谢谢Naaff的帮助。 我想我将继续使用firefox,并且我将为每个算法指定生成的svg文件中的行宽。这对我来说已足够了。