css – 将文本行对齐在SVG中居中

我需要在SVG中输出多行文本。
为此,我使用以下方案:
<text>
  <tspan> First line </tspan>
  <tspan> Second line </tspan>
</text>

文本的第一行和第二行可以具有不同数量的字符,其可以动态地改变。
我想让第二行出现在第一行和两个文本的中间。

我可以通过为第二个< tspan>添加dy =“15”,使第二行出现在第一行下面。

我可以将每个单独的< tspan>通过添加text-anchor =“middle”到它。

但是如何做那些< tspan>的相对中心对齐?

我试图对每个< tspan>使用x =“0”但显然它不工作,因为每个< tspan>具有不同的宽度,并且较短行中的渲染文本向左移位。

是否存在仅使用CSS和/或SVG来使不同宽度的2 tspan的中心对准的方式。

解决方法

如果你添加text-anchor =“middle”到每个tspan,你将它们居中(你必须删除tspan之间的空间,否则额外的空间将被视为第一行的一部分,它们不会完全中心)。

例如:

<svg>
    <text y="50" transform="translate(100)">
       <tspan x="0" text-anchor="middle">000012340000</tspan><tspan x="0" text-anchor="middle" dy="15">1234</tspan>
   </text>
</svg>

参见:JSFiddle

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效
js如何实现文字闪烁特效?(图文+视频)
CSS3怎么实现背景颜色渐变?(图文+视频)
Css3如何实现文本溢出隐藏并显示省略号效果
添加CSS的三种方式
css如何实现单边阴影效果
css font-size-adjust属性怎么用
三分钟了解css中z-index属性
css text-align-last属性怎么用
css设置背景图片模糊,内容不模糊
弹性盒子布局flex是什么
圆角边框的css属性是什么
前端特效之520表白神器-旋转照片墙
css font-style属性怎么用
css position属性怎么用