我有以下矩形...
<rect x="0px" y="0px" width="60px" height="20px"/>
我想将“小说”一词放在其中。对于其他矩形，svg自动换行是否保留在其中？对于在水平和垂直居中以及自动换行的形状中插入文本，我似乎找不到任何特别的东西。另外，文本不能离开矩形。
查看http://www.w3.org/TR/SVG/text.html#TextElement示例没有帮助，因为文本元素的x和y与矩形的x和y不同。文本元素似乎没有宽度和高度。我不确定这里的数学。
（我的HTML表格无法使用。）
在SVG中将文本水平和垂直居中的简单解决方案：
将文本的位置设置为要居中的元素的绝对中心：
x="50%" y ="50%"。x将是该元素的x +宽度的一半（与y类似，但具有高度）。使用text-anchor属性将文本以text-anchor的值水平居中：
中间
将渲染的字符对齐，以使生成的渲染文本的几何中间位于当前的初始文本位置。
使用middle属性将文本垂直放置在值为[[dominant-baseline的中心（或根据您想要的样子，可能需要执行[[dominant-baseline））
middle/* Horizontal alignment */
text.goesleft{text-anchor:end}
text.equalleftright{text-anchor:middle}
text.goesright{text-anchor:start}
/* Vertical alignment */
text.goesup{dominant-baseline:text-after-edge}
text.equalupdown{dominant-baseline:central}
text.goesdown{dominant-baseline:text-before-edge}
text.ruledpaper{dominant-baseline:alphabetic}
，这绝对是错误的：它甚至不是公认的值！我认为它是默认字体，即Mozilla，所以他们很幸运。更多编辑：Safari（11.1.2）理解dominant-baseline:baseline，但不理解alphabetic。在text-before-edge上也失败。很棒的东西，苹果。因此，您可能被迫使用text-after-edge并毕竟允许使用后代。抱歉。
每个“文本”元素导致一个要呈现的文本字符串。 SVG不执行自动换行或自动换行。达到效果多行文本，请使用以下方法：
作者或创作包需要预计算换行符并使用多个“文本”元素（每个元素一个文字行）。
作者或作者包需要预先计算线中断并使用单个“文本”元素带着一个或多个“ tspan”孩子具有适当值的元素将“ x”，“ y”，“ dx”和“ dy”属性为这些人设置新的开始位置换行符的字符。（此方法允许用户输入文字跨多行选择文字-请参阅文字选择和剪贴板操作。）
- 表达要在另一个XML中呈现的文本命名空间，例如XHTML [XHTML]嵌入式内联“ foreignObject”元素。 （注意：这种方法的确切语义是目前尚未完全定义。）
central<svg width="200" height="100">
<rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
</svg>属性和http://www.w3.org/TR/SVG11/text.html#Introduction元素来模拟文本换行，并且如规范中所述，某些工具可以使此过程自动化。例如，在Inkscape中，选择所需的形状和所需的文本，然后使用“文本”->“流入框架”。这样，您就可以使用换行符来编写文本，换行符将根据形状的边界进行换行。另外，请确保遵循以下指示，以告知Inkscape保持与SVG 1.1的兼容性：dy此外，有些JavaScript库可用于动态自动执行文本换行：tspan
[值得注意的是CSVG将形状包装到文本元素的解决方案（例如，请参见其“按钮”示例），但必须指出的是，它们的实现可在浏览器中使用[[not：http://wiki.inkscape.org/wiki/index.php/FAQ#What_about_flowed_text.3F
我之所以这样说，是因为我开发了一个CSVG风格的库，该库可以使您执行类似的操作并且可以在Web浏览器中工作，尽管我尚未发布它。
stroke-width
<g>
<rect x={x} y={y} width={width} height={height} />
<text
x={x + width / 2}
y={y + height / 2}
dominant-baseline="middle"
text-anchor="middle"
>
{label}
</text>
</g>
<svg class="svg-rect" width="50" height="40">
<rect x="0" y="0" rx="3" ry="3" width="50" height="40" fill="#e7e7e7"></rect>
<text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">N/A</text>
</svg>
dominant-baseline="central"
text-anchor="middle"
<svg width="200" height="100">
<g>
<rect x="0" y="0" width="200" height="100" style="stroke:red; stroke-width:3px; fill:white;"/>
<text x="50%" y="50%" style="dominant-baseline:central; text-anchor:middle; font-size:40px;">TEXT</text>
</g>
</svg>