svg中viewBox内旋转字母的定位

我有生成svg的代码（通过生成XMLDOM）。它接受输入文本，并在页面上随机散布其字母，如下所示

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <!-- ... styles omitted -->
    <text x="20" y="150" rotate="45">M</text>    
    <text x="100" y="80" rotate="45">W</text>        
    <text x="90" y="50" rotate="270">X</text>
    <!-- etc ... -->
</svg>

M
W
X

我有问题如何有效地填充页面，而不让字母延伸到视图框之外。或者我限制了x和y的随机值，但是在边界周围有很多空白。或者我对x，y使用更宽的范围，但是字母会在外面流血。如图所示，在jsfiddle示例（）中显示红色字母。 我试图根据旋转调整x、y范围，但由于字母形状不同，仍然没有多大帮助

我正在寻找在svg中设置这些字母样式/位置的方法，使它们完全位于视图端口内，同时能够填充空间边界到边界（后面添加的第二个条件是为了澄清）。比如说给出0-100%，其中0%表示“触摸左边框”，100%表示“触摸右边框”。有什么办法吗

下面是我手工编辑的示例，以获得更多不太理想的结果

---

这可能意味着控制旋转中心，使其位于图示符的中心。这样，您只需要在每条边上添加0.5em的填充

可以从将文本控制点水平和垂直定位在中间开始：

text {
    text-anchor:middle;
    dominant-baseline:middle;
}

不幸的是，使用

text

元素的

rotate

属性并不能像预期的那样工作（至少在Firefox中是这样）。但是你可以通过一个

transform

属性添加一个post旋转来解决这个问题。最好的表达方式是也用翻译来定位字形：

<text transform="translate(40 100) rotate(60)">A</text>

A.
B
C
D
E
F

这可能意味着控制旋转中心，使其位于图示符的中心。这样，您只需要在每条边上添加0.5em的填充

可以从将文本控制点水平和垂直定位在中间开始：

text {
    text-anchor:middle;
    dominant-baseline:middle;
}

不幸的是，使用

text

元素的

rotate

属性并不能像预期的那样工作（至少在Firefox中是这样）。但是你可以通过一个

transform

属性添加一个post旋转来解决这个问题。最好的表达方式是也用翻译来定位字形：

<text transform="translate(40 100) rotate(60)">A</text>

A.
B
C
D
E
F

谢谢您的详细回答。文本锚定有助于使旋转更可预测（结果表明，不需要主导基线，因为每个基线都需要dy校正）。然而，事实证明，使用外切圆半径作为安全距离过于保守-这会导致边界周围出现较大间隙（例如）。所以这肯定是一个进步，但不是一个完整的解决方案。也许有点迂腐，但你的问题没有说明什么是成功的标准。我的答案包含的关于你的目标的猜测量与你的问题包含的不准确量完全相同。公平地说，这是梦解决方案（“触摸左/右边界”）间接暗示的，但没有明确说明-我现在添加了它。不过还是要感谢你的回答，它帮助我学到了一些东西。谢谢你详细的回答。文本锚定有助于使旋转更可预测（结果表明，不需要主导基线，因为每个基线都需要dy校正）。然而，事实证明，使用外切圆半径作为安全距离过于保守-这会导致边界周围出现较大间隙（例如）。所以这肯定是一个进步，但不是一个完整的解决方案。也许有点迂腐，但你的问题没有说明什么是成功的标准。我的答案包含的关于你的目标的猜测量与你的问题包含的不准确量完全相同。公平地说，这是梦解决方案（“触摸左/右边界”）间接暗示的，但没有明确说明-我现在添加了它。不过还是要感谢你的回答，它帮助我学到了一些东西。