如何操纵SVG外部对象HTML文本的换行和定位？

Question

如何操纵SVG外部对象HTML文本的换行和定位？

4

我正在制作一个照片框架设计器。与网站比起来，使用它要容易得多。这是它的链接。

基本上，在文本输入中，它会将文本打印到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>

- thinkrite

远远不够。完全不行。当第二行到来时，我需要将第一行文本向上推动一行。 - thinkrite

我不确定你的意思。那个页面告诉你如何做到这一点。 - Paul LeBeau

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

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

<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> 元素添加更多文本，文本将保持居中。

例如，这里有一个演示包含两个 SVG，它们之间唯一的区别是文本段落的长度。