Question

Looking for the solution that will allow me to easily manage the dynamically injected text (with unknown length) in the svg rect / circle area.

Currently, designer generates for me svg via using AI and other design software. In generated code, the position of the text elements is determined by coordinates what means that each and every text length change forces the developer to change coordinates manually to keep appropriate alignment.

Is there a generic way to be independent of the length of the text and always align it properly in the middle (horizontally and vertically)?

Below code example and its visualization.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1106.3 443" style="enable-background:new 0 0 1106.3 443;" xml:space="preserve">
<style>
        .rect-header { fill: #AAA; }
        .rect-bg { fill: #CCC; }
    </style>

    <rect class="rect-header" width="1106.3" height="39.9"/>
    <rect y="39.7" class="rect-bg" width="553.2" height="32.7"/>
    <rect y="72.4" class="rect-bg" width="553.2" height="32.7"/>
    <rect x="553.2" y="39.7" class="rect-bg" width="553.2" height="32.7"/>
    <rect x="553.2" y="72.4" class="rect-bg" width="553.2" height="32.7"/>

    <text transform="matrix(1 0 0 1 525.1992 25.7028)">HEADER</text>
    <text transform="matrix(1 0 0 1 235.1992 60.7028)">48.1</text>
    <text transform="matrix(1 0 0 1 815.0431 60.7029)">103</text>
    <text transform="matrix(1 0 0 1 810.2572 93.731)">ABC</text>
    <text transform="matrix(1 0 0 1 229.0706 93.7309)">DEFG</text>
</svg>

SVG example visualization

Answer 1

如果您没有特别需要将文本放在Svg中，您可以让其中的父postion: relative;使position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)的svg居中，并将文本放在无论元素的大小如何，它都会占据中心。
但是，如果您想在SVG中包含文本，我很抱歉，我无法帮助您

Answer 2

使用text-anchor="middle"指定文字应以您提供的坐标为中心，而不是从那里开始。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" viewBox="0 0 1106.3 443">
  <style>
    .rect-header { fill: #AAA; }
    .rect-bg { fill: #CCC; }
  </style>

  <rect class="rect-header" width="1106.3" height="39.9"/>
  <rect y="39.7" class="rect-bg" width="553.2" height="32.7"/>
  <rect y="72.4" class="rect-bg" width="553.2" height="32.7"/>
  <rect x="553.2" y="39.7" class="rect-bg" width="553.2" height="32.7"/>
  <rect x="553.2" y="72.4" class="rect-bg" width="553.2" height="32.7"/>

  <g text-anchor="middle">
    <text x="553.2" y="25.7">HEADER</text>
    <text x="276.6" y="60.7">48.1</text>
    <text x="829.8" y="60.7">103</text>
    <text x="829.8" y="93.7">ABC</text>
    <text x="276.6" y="93.7">DEFGHIJKLMNOPQRSTUVWXYZ</text>
  </g>
</svg>

Answer 3

SVG viewBox大小非常重要。这决定了相对规模。您可以看到每个内部<rect>的大小相对于viewBox。总viewBox宽度为1106.3，因此每个rect是553.2的一半。

您可以在<tspan>标记内添加<text></text>。设置tspan x和y值，以viewBox大小的1/2开始，减去字体大小的1/2。这可能需要稍微调整才能恰到好处。 SVG使用text-align和text-anchor样式标记进行展示（不是位置：相对/绝对）。尝试“text-align：center; text-anchor：middle;”

SVG经常在Adobe Illustrator，Sketch或其他可视化应用程序中创建。作为一名开发人员，我经常直接在XML中进行编辑，仔细删除不必要的样式，转换等。如果您在推送代码之前测试所有内容，请不要害怕舍入一些数字。

我是Ubuntu用户，因此我使用Inkscape（也适用于Mac和Windows）。它是一个很好的工具，提供了一个内置的XML编辑器和属性编辑器的可视化布局。

SVG - center dynamic text within svg elements / blocks

3 个答案: