Question

这是我的代码：

<?xml version="1.0">
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
  <text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text>
  <g transform="translate(0,0) rotate(0)">
    <rect x="0" y="0" width="10" height="10" fill="blue" />
    </g>
  </svg>

这给了我hello world和一个矩形。我想知道如何相对于我的文本定位矩形。我认为这样可以解决问题，但根据我上面的代码，矩形应该位于文本的顶部，但它不会。

编辑：我试过了，但它并没有改变任何东西：

<?xml version="1.0">
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
    <g transform="translate(0,0) rotate(0)">
    <rect x="0" y="0" width="10" height="10" fill="blue" />
    </g>
<text id="t1" x="50%" y="50%" text-anchor="middle">Hello World</text>

  </svg>

Answer 1

这接近你想要的吗？

＆＃13;

<svg width="100%" height="100%" viewBox="0 0 100 30" version="1.1">
  <rect x="0" y="0" width="100%" height="100%" fill="blue" />
  <text id="t1" x="50%" y="50%" text-anchor="middle" dy="0.3em">Hello World</text>
</svg>

＆＃13;

用于dy以使文本垂直居中的正确值是特定于字体的。您可能需要调整该值以匹配您选择的任何字体。在我看来，它是alignment-baseline等其他解决方案的更可靠的替代方案。

Answer 2

你可以尝试另一种方法！也许它适合你...

p {
  font-size: 42px;
}

p>svg {
  width: 60px;
  height: 60px;
  display: inline-block;
  position: relative;
  top: 28px;
}

<div style="display:none">
  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 20 20" id="box">
      <g transform="translate(0,0) rotate(0)">
        <rect x="0" y="0" width="12" height="12" fill="blue" />
      </g>
    </symbol>
  </svg>
</div>
<p>
  <svg>
    <use xlink:href="#box"></use>
  </svg> Hello World
</p>

相对于文本定位SVG项

2 个答案: