2012-03-16 23 views
1

我需要编写一些代码(对于带有直线HTML/JS客户端的web.py webapp),它将生成一组点值的可视化表示。每个点都有一个X和Y坐标,并且该值是一个整数。如果我可以使用SVG来做到这一点,那么我可以缩放图像客户端没有额外的代码。我可以这样做吗?我很关心一些事情:来自点值对的SVG图

  • 这些点之间并不一定有任何关系。它们不一定在网格中,我们也不能说附近有多少个点等。
  • 梯度主要是单向的,同一形状上的多个梯度似乎是一个外国概念。
  • 填充需要一个现有的图像,在这一点上,我最好生成整个图像服务器端。
  • 对象总是有一个分层,即使它没有指定,它可以改变图像的呈现方式。

如果有帮助,考虑的情况下,我们有5人,其中一人比其他人更接近一点包围的点(精确的距离和大小可以调节)。所有六个点都有不同的颜色(红色,绿色,蓝色,青色,品红色,黄色,中间为红色,黄色稍微靠近),外部五个点大致排列在五角形中。请注意,这种情况不是唯一的选择,只是理论上可能的情况。

我可以用SVG做这个,还是我应该渲染一个图像服务器端?

编辑:主要困难不在绘制点,它是填充点之间的空间,以便没有空白,并且如果知道数据,则颜色转换不会很难/不可预测。

回答

1

我不完全理解你想要使用svg的不同问题。我目前正在使用您正在描述的设置来呈现X-Y散点图和高斯曲线,并发现它的效果很好。

关于对象分层的最后一点,当对不透明度小于100%且颜色不同的对象进行分层时,您必须特别小心。颜色“添加”的方式取决于您将对象添加到svg图形的顺序。

谢天谢地,您可以使用不同的过滤器来覆盖颜色而不混合它们。具体来说,我正在使用FeComposite过滤器元素。这里有一个很好的例子: http://www.w3.org/TR/SVG/filters.html#feCompositeElement