对 Google SVG 代码进行逆向工程答案

【问题标题】：Reverse-engineering Google SVG code对 Google SVG 代码进行逆向工程
【发布时间】：2011-06-06 20:27:16
【问题描述】：

我正在查看一些 Google 图表以了解如何编写 SVG 代码。散点图上的点有点奇怪（这些只是叠加在网格上的彩色点）。

每个点绘制两次，一次是大 (r=12) 零笔画白色圆圈，另一次是所需颜色的小 (r=3.5) 圆圈：

<circle cx="304.73" cy="61.50050223557585" r="12" stroke="none" stroke-width="0" fill-opacity="0" stroke-opacity="0" stroke-dasharray="0" fill="#ffffff"></circle>
...
<circle cx="304.73" cy="61.50050223557585" r="3.5" stroke="#dc3912" stroke-width="2" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#dc3912"></circle>

知道这有什么意义吗？删除空白圆圈对输出绝对没有（明显的）差异。我一直在尝试移动一个（组合的）点，直到它位于网格线的顶部，或者重叠另一个点，并改变空白圆圈的大小，但我看不出它有什么作用。

谢谢-

阿尔

【问题讨论】：

标签： svg google-visualization

【解决方案1】：

我认为它可以触发工具提示的事件。您只需将鼠标移动到散点图上的一个点附近（12 像素内），它就会显示该点的信息。

【讨论】：

啊 - 知道一定是有原因的。工具提示实际上确实在那个距离处开始。
这东西怎么写多行cmets？！%&*！只是通过你的鼠标悬停教程 :) 谷歌 javascript 被混淆了，所以在那里没有太多要学习的东西。我可以在 Chrome 中打破鼠标悬停（不是 Firebug - 它认为那里没有任何 Javascript），但是代码太模糊了，没什么可看的。我想我可以复制 ECMAScript 中的所有内容。
是的，我无法弄清楚鼠标悬停在 Google 中是如何工作的，但额外的圆圈似乎是减少挑剔的好方法。我通常更喜欢在 ECMAScript 中做所有事情——这样更容易看到发生了什么。