Javascript 定位SVG元素

在第一次使用SVG（使用库）的过程中，我遇到了一个问题：在画布上定位动态元素时，动态元素完全包含在画布中。我想做的是随机定位n个单词/短语

由于文本是可变的，其位置也需要可变，因此我要做的是：

最初在点

0,0

处创建文本，无不透明

使用

text.getBBox（）.width

检查绘制的文本元素的宽度

将新的

x

坐标设置为

Math.random（）*（画布宽度-（文本宽度/2）-pad）

将文本的

x

坐标更改为新设置的值（

text.attr（'x'，x）

）

将文本的不透明度属性设置为1

我将是第一个承认我的数学能力有限的人，但这似乎很简单。不知何故，我的画布的右边缘仍然会有文字溢出。为了简单起见，我通过将它添加到

Math.random（）

结果中，删除了同样设置最小

x

值的位。不过，它就在那里，我在画布的前沿看到了同样的问题

我的理解是（

Math.random（）

位将生成一个介于0和1之间的数字，然后将该数字乘以某个数字（在我的例子中，画布宽度-文本宽度的一半-一些任意填充）以获得外部边界。我将文本的宽度一分为二，因为它在网格上的位置设置在它的中心

---

我希望我已经盯着这个太久了，但是我的数学有没有生锈，或者我对

math.random（）

、SVG、文本或者这个解决方案下的任何其他东西的行为有什么误解？

答案是我是如何思考

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

---

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

对不起，我以为我有一个解决方案，所以我删除了/取消了删除，但后来意识到数学计算结果与您之前的结果一致。我不知道拉斐尔在做什么，所以我真的帮不了你。没问题。不过，你可能走对了方向。仔细观察

Math.random（）

的运算方式，2的除法可能是罪魁祸首。如果真是这样，我们会继续跟进。