svg中的文本居中
我知道这个问题已经问过，但我看到的解决方案对我不起作用。我有下面的代码，但正如你所看到的，文本不在圆圈的中间
null
svg{
width :30%
}
.circle--out,.circle--in {
fill: none;
}
.circle--out {
stroke-width: 20px;
stroke: black;
z-index: 1;
}
.circle--in{
stroke-width: 10px;
stroke: white;
transform: rotate(-90deg);
transform-origin: 50%;
}
.text{
font-size:3rem;
}<svg class="circle_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" data-class-link="myne" data-size="desktop">
<circle class="circle--out" cy="60" cx="60" r="50"></circle>
<circle class="circle--in" cy="60" cx="60" r="50" style="stroke-dasharray: 301.2, 313.652; animation-name: circleAnimation;"></circle>
<text class="text" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" style="
font-size: 4rem;
">99</text></svg>null
共有1个答案
使用alignment-baseline=“central”而不是middle
-
问题内容： 我有一个要在div中居中的SVG。div的宽度为900px。SVG的宽度为400像素。SVG的margin-left和margin- right设置为auto。不起作用，它的作用就像是左边距为0（默认值）。 有人知道我的错误吗？ 问题答案： SVG默认为内联。添加到它，然后将按预期工作。
-
问题内容： 我有一个div 。其内容水平和垂直居中。 当div中的内容太长时，内容将自动换行。但是在这种情况下，对齐方式会中断。请参阅摘要。 如果我添加正确显示。但是，为什么没有中心呢？ 问题答案： flex容器的HTML结构具有三个级别： 容器 该项目 内容 每个级别代表一个独立的独立元素。 该属性是在flex容器上设置的，用于控制flex项目。它不能直接控制项目的子项（在这种情况下为文本）。
-
问题内容： 我想像在CSS中一样给SVG的背景上色 我只能找到有关的文档，该文档使文本本身着色 可能吗 问题答案： 否，这是不可能的，SVG元素没有 表示属性。 为了模拟这种效果，您可以使用或类似的东西（过滤器）在text属性后面绘制一个矩形。使用JavaScript，您可以执行以下操作：
-
SVG 文本 - <text> <text> 元素用于定义文本。 实例 1 写一个文本： 下面是SVG代码：<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg> 对于Opera用户： 对于Opera用户： 对于Opera用户： 对
-
我有一个容器div，其中高度和宽度设置为100%，位置是相对的。在div I内部，使用display:block和margin:auto将图像居中（图像小于div）。然后我尝试使用position:absolute，left:45%，top 82px将图像中的文本居中。垂直对齐看起来不错，但是随着文本中字符数量的增长，文本不再在中间对齐。因此，在我下面的图像中，如果文本为4个字符，文本将不再居中。
-
问题内容： 如何在ReactNative中水平和垂直居中放置文本？ 我在rnplay.org中有一个示例应用程序，其中 justifyContent =“ center” 和 alignItems =“ center” 不起作用：https : **//rnplay.org/apps/AoxNKQ** 文本应居中。为什么在文本（黄色）和父容器之间的顶部留有空白？ 码： 问题答案： 从‘样式删除，和