thi*_*ite 5 html javascript jquery svg
所以我正在制作相框设计师.而不是小提琴有网站,因为它更容易.这里是.
基本上在文本输入上,它将文本打印到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 的演示,它们之间的唯一区别是文本段落的长度.