定位 SVG 元素

Question

在第一次玩 SVG 的过程中（使用 Raphael 库），我遇到了一个问题，在画布上定位动态元素时，它们完全 em> 包含在画布中。我正在尝试做的是随机放置 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。

我将是第一个承认我的数学头脑有限的人，但这似乎很简单。不知何故，我的文本仍然超出了画布的右边缘。为简单起见，我通过将它添加到Math.random() 结果中删除了同样设置最小x 值的位。不过，它就在那里，我在画布的前缘看到了同样的问题。

我的理解（例如）是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。

希望这足够清楚，可以理解。虽然我想起来很有道理，但这种事情对我来说并不是很直观，所以我相信我会经常回到这里。