對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代碼進行反向工程

回答

相關問題