如何操作 svg 异物 html 文本换行和定位？ [复制]答案

【问题标题】：How to manipulate svg foreign object html text wrapping and positioning? [duplicate]如何操作 svg 异物 html 文本换行和定位？ [复制]
【发布时间】：2014-12-04 05:57:25
【问题描述】：

所以我正在做一个相框设计师。而不是一个小提琴有网站，因为它更容易。 Here it is.

基本上在文本输入上，它将文本打印到使用嵌入的外来对象标签的 SVG 框架中，因此我可以访问它的自动文本换行。问题在于文本的定位。当单词在两行时，定位是正确的。然而，在单行上，文本太高了。我需要它位于照片插槽和框架底部之间的中心。这可以通过调整异物的“y”值轻松完成。然而，这会导致两行文本是两个低并且不在位置上。我不知道如何解决这个问题。也许是 jQuery 或 javascript？谢谢。

代码：

<foreignObject x="78" y="460" width="1100" height="220" style="color:white;text-align:center">
       <body xmlns="http://www.w3.org/1999/xhtml">
           <p id="text">Your words here</p>
       </body>
    </foreignObject>

【问题讨论】：

附近没有。完全没有。当第二行出现时，我需要将一行文本向上推。
我不确定你的意思。该页面会告诉您确切的操作方法。

标签： javascript jquery html svg

【解决方案1】：

为了证明我的观点，下面是一个示例，使用了建议的重复问题页面中的一种技术。

<svg width="500" height="200">
    <rect x="0" y="0" width="500" height="200" fill="orange"/>
    <foreignObject x="0" y="0" width="500" height="200">
       <style>
          div { display: table; font-size: 60px; width: 500px; height: 200px; }
          p   { display: table-cell; text-align: center; vertical-align: middle; }
       </style>
       <body xmlns="http://www.w3.org/1999/xhtml">
           <div>
              <p id="text">Your words here</p>
           </div>
       </body>
    </foreignObject>
</svg>

如果您向<p> 元素添加更多文本，文本将保持居中。

例如，here is a demo 带有两个 SVG，它们之间的唯一区别是文本段落的长度。

【讨论】：

啊，我明白了。谢谢。虽然为什么是表属性？
display 的表值的使用是为了让您可以使用vertical-align。当在表格单元格中使用时，此属性仅具有垂直居中的效果。见：developer.mozilla.org/en-US/docs/Web/CSS/vertical-align