定位SVG元素

Question

在第一次嘗試使用SVG的過程中（使用Raphael庫），我遇到了一個問題，在畫布上定位動態元素的方式是它們包含在內部的完全畫布。我想要做的是隨機位置n單詞/短語。

由於文本是可變的，它的位置需要是可變以及使我在做什麼是：

1. 最初創建點0,0無混濁的文本。
2. 使用text.getBBox().width檢查繪製的文本元素的寬度。
3. 設置一個新的x座標爲Math.random() * (canvas_width - (text_width/2) - pad)。
4. 將文本的x座標更改爲新設置的值（text.attr('x', x)）。
5. 文本的不透明度屬性設置爲1。

我會是第一個承認，我的數學智慧是有限的，但是這似乎很簡單。不知怎麼的，我最終還是得到了超出畫布右邊緣的文字。爲了簡單起見，我通過將x值添加到Math.random()結果中去除了該位，該值也設置了最小值。儘管如此，我仍然在畫布前端看到同樣的問題。

我的理解（比如說）是，Math.random()位會產生一個介於0和1之間的數字，然後可以乘以某個數字（在我的例子中，畫布寬度 - 文本寬度的一半 - 某些任意填充）來獲取外部邊界。我將文本的寬度減半，因爲它在網格上的位置設置在其中心。

我希望我剛剛在這盯着太久，但我的數學是生鏽或我誤解一些有關的Math.random()，SVG，文本或其他任何東西，這種解決方案的引擎蓋下的行爲？

Answer 1

答案原來是我對Math.random()方程式的思考。它不像乘以最大值然後加上最小值（當然）那麼簡單。這看起來更像在容器的右端建立一個雙寬溝，然後移動整個邊界，吃起來是排水溝的一半：

var x = Math.random() * (canvas_w - 20 - (text.getBBox().width)) + (text.getBBox().width/2 + 10); 

在英語......

你必須加倍你想要考慮的每個元素的寬度，所以你可以將整個範圍移回這個寬度，以保持事物的美好和平等。在我的情況，我想解釋文本的寬度加上的10

例如填充的一半......

鑑於500畫布寬度，50文本寬度和期望在10的「陰溝」中，我創建了一個在0和430（500 - 20 - 50）之間的隨機數。通過添加我需要考慮的寬度 - 文本寬度的一半（25）+填充（10） - 我剩下一個35和465之間的隨機數。如果我的文本位於邊界的外邊緣，則它只能達到10或490。

希望這是足夠清楚的說明。雖然在我思考時很有道理，但這種事情對我來說並不直觀，所以我相信我會經常回頭看這裏。