如何操作svg外来对象html文本包装和定位

How to manipulate svg foreign object html text wrapping and positioning?

本文关键字：html 对象 文本 包装 定位 何操作 操作 svg      更新时间：2023-09-26

所以我正在做一个相框设计师。不要摆弄网站，因为它更容易。给你。

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

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

<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的演示，它们之间唯一的区别是文本段落的长度。

相关文章：