javascript - 垂直对齐 svg 圆内的文本

标签 javascript svg

我正在尝试将 <text> 居中<path>里面元素。路径是使用 @opsb 绘制的圆很好的答案。我可以使用 text-anchor='middle' 将文本水平居中.

有没有办法让它垂直居中?

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path id='path' fill="transparent" stroke='red' stroke-width='6'/>
  <text x="100" y="100" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle'>5</text>
</svg>

JSFiddle使用 JavaScript。

最佳答案

您需要使用alignment-baseline 使文本垂直居中。

类似这样的事情:

<text x="100" y="100" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle' alignment-baseline="central">5</text>

关于javascript - 垂直对齐 svg 圆内的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35489442/

相关文章:

javascript - 删除 d3js 不工作的事件监听器

javascript - 单击/悬停按钮时显示不同的颜色和消息

javascript - Html 表单 - 查看和更改信息

javascript - 隐藏/显示 div 内的 ASP 复选框列表

javascript - 如何在不直接粘贴代码的情况下访问 html 中的 SVG 元素(最好使用 CSS)?

javascript - vue中动态加载svg图形

javascript - @click 事件中添加一个更漂亮的图标的问题

javascript - 不能声明或修改变量

css - 使用 CSS 制作信息图 SVG 动画(圆环图)

html - 如何在 svg 中引用 jpg?