Question

我希望从100 x 100窗口中心的任意字体生成包含单个ascii字符（例如＆＃39; g＆＃39;或＆＃39; W＆＃39;）的SVG文件。这是我最接近的，但它不太正确......

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <text x="50" y="50" font-size="100px" 
      text-anchor="middle" alignment-baseline="middle">g</text>
</svg>

Answer 1

在SVG中没有垂直居中文本的一般方法。

你可以做的最好的工作是基线（<text> y属性）应该用于特定字体和字符组（例如所有大写字母）。

Answer 2

SVG本身没有自动垂直布局功能;你需要别的东西来计算盒子的高度，比如JavaScript或......

看起来您正在将其嵌入到网络浏览器中。如果是这样，那么您可以使用HTML的自动布局功能为您执行此操作，使用<foreignObject>在您的SVG中嵌入HTML代码段，内容为display:table-cell; vertical-align:middle。

在svg中居中一个角色

2 个答案: