对Google SVG代码进行反向工程

我正在查看一些Google图表以了解如何编写SVG代码。对散点图上的点有一些好奇（这些只是叠加在网格上的彩色点）。对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>

不限想法这点是什么？去除空白圆圈使得输出绝对没有（明显）不同。我已经尝试过移动一个（组合的）点，直到它位于网格线的顶部，或者与另一个点重叠，并且改变了空白圆的大小，但是我看不到它完成了任何操作。

谢谢 -

铝

来源

2011-06-06 EML

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

来源

2011-06-07 09:22:09

Aaah - 知道必须有一个原因。工具提示实际上在大约那个距离内踢了一脚。 – EML 2011-06-07 12:05:11

你如何在这件事上写多行注释？！％＆*！只需通过你的鼠标悬停教程:)谷歌的JavaScript被混淆，所以没有太多东西要学习。我可以在Chrome浏览器中打破鼠标悬停（不是Firebug--它不认为这里有任何Javascript），但代码如此混乱，没有什么可看的。我想我可以在ECMAScript中复制所有内容。 – EML 2011-06-07 12:08:54

是的，我无法弄清楚鼠标悬停在谷歌的工作方式，但额外的圈子似乎是一个让它不那么挑剔的好方法。我通常更喜欢在ECMAScript中做所有事情 - 然后看看发生了什么更容易。 – 2011-06-07 16:52:29

对Google SVG代码进行反向工程

回答

相关问题