Question

我需要在SVG对象的标签内水平居中文本，而无需定义x坐标。我试图在CSS中找到text-align：center的替代方法。我已经使用过text-anchor：middle但它不起作用。我有这个代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0" stop-color="#FFE89C" stop-opacity="1"/>
 <stop offset="0.2" stop-color="#FFE192" stop-opacity="1"/>
 <stop offset="0.4" stop-color="#ffd47a" stop-opacity="1"/>
 <stop offset="0.6" stop-color="#ffc967" stop-opacity="1"/>
 <stop offset="0.8" stop-color="#febd52" stop-opacity="1"/>
 <stop offset="1" stop-color="#fdba4c" stop-opacity="1"/>
</linearGradient>
</defs>
<text fill="url(#grad1)" x="73" y="50">50</text>
</svg>

Answer 1

文本相对于x轴居中，我想要它＆＃39;中央相对父SVG容器，否则如果是文本内容的长度发生变化，有必要更改x 坐标。

您只需将文字放在git checkout master git diff --name-status dev中间的某个位置即可。然后，如果您使用viewBox，文字将保持居中。

＆＃13;

text-anchor="middle"

＆＃13;

Answer 2

在CSS

中居中非文本对象

我没有在SVG块中测试过这个，但是这是用于使大多数任何内容都在div中的CSS。我在需要居中项目的地方使用它并且text-align不合适。

简而言之：使用自动宽度，左右两侧，并给它一个总宽度参数。

// Classes
.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 40%;  // Use whatever percentage of the container width you need
}

所有3个参数都是必需的，否则它们不会居中。

Answer 3

text-anchor =“middle”通过使用svg元素的这个属性，你可以使你的svg元素的文本对齐。！

如何在SVG中居文本？

3 个答案:

在CSS