来自点 - 值对的SVG图

Question

我需要编写一些代码（对于带有直接HTML / JS客户端的web.py webapp），它将生成一组点值的可视化表示。每个点都有一个X和Y坐标，值是一个整数。如果我可以使用SVG执行此操作，那么我可以在没有额外代码的情况下在客户端扩展图像。我真的可以这样做吗？我担心一些事情：

• 这些要点不一定有任何关系。它们不一定在网格中，我们也不能说附近有多少点等。
• 渐变主要是单向的，同一形状上的多个渐变似乎是一个外国概念。
• 填充需要现有图像，此时，我最好还是生成整个图像服务器端。
• 对象始终具有分层，即使未指定分层，也可以更改图像的渲染方式。

如果有帮助，请考虑我们有一个点被其他5个点包围的情况，其中一个点比其他点更近（可以调整精确的距离和大小）。所有六个点都有不同的颜色（红色，绿色，蓝色，青色，洋红色，黄色，中间为红色，黄色稍微靠近），外面的五个点大致排列成五边形。请注意，这种情况不是唯一的选择，只是理论上可能出现的情况。

我可以使用SVG执行此操作，还是应该在服务器端渲染图像？

编辑：主要的难点不是绘制点，而是填充点之间的空间，这样就没有空格，如果你知道数据，颜色过渡就不会苛刻/不可预测。

Answer 1

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

关于对象分层的最后一点，在对不同颜色的不透明度低于100％的对象进行分层时，必须特别小心。颜色“添加”的方式取决于将对象添加到svg绘图的顺序。

幸运的是，您可以使用不同的滤镜来叠加颜色而不会混合它们。具体来说，我正在使用 FeComposite 过滤器元素。这里有一个很好的例子： http://www.w3.org/TR/SVG/filters.html#feCompositeElement