定位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。

希望这是足够清楚的说明。虽然在我思考时很有道理，但这种事情对我来说并不直观，所以我相信我会经常回头看这里。