Align Lines of Text to Center in Svg

Align lines of text to center in SVG

If you add text-anchor="middle" to each tspan you will center them (you have to remove the space between the tspans as well, otherwise the extra space will be considered as part of the first line and they won't be completely centered).

For example:

<svg>
    <text y="50" transform="translate(100)">
       <tspan x="0" text-anchor="middle">000012340000</tspan><tspan x="0" text-anchor="middle" dy="15">1234</tspan>
   </text>
</svg>

See: JSFiddle

SVG: how to center multiple lines of text evenly inside of element?

This is how I would do it:I'm centring everything around the center of the SVG canvas and I'm offsetting the first and the last line with dy

text{text-anchor:middle;dominant-baseline:central;}

<svg style="border:1px solid black" width="200" height="300">
    <text x="50%" y="50%" font-size="15">
        <tspan x="100" y="150" dy="-1.2em" >tspan line 1</tspan>
        <tspan x="100" y="150" >tspan line 2</tspan>
        <tspan x="100" y="150" dy="1.2em" >tspan line 3</tspan>
    </text>
</svg>

How to place and center text in an SVG rectangle

An easy solution to center text horizontally and vertically in SVG:

1. Set the position of the text to the absolute center of the element in which you want to center it:

   • If it's the parent, you could just do x="50%" y ="50%".
   • If it's another element, x would be the x of that element + half its width (and similar for y but with the height).

2. Use the text-anchor property to center the text horizontally with the value middle:

   middle

   The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.

3. Use the dominant-baseline property to center the text vertically with the value middle (or depending on how you want it to look like, you may want to do central)

Here is a simple demo:

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>

How to align text in the centre with an SVG element?

• Use text-anchor='middle'.
• Set the <text> x position exactly to the center of the SVG (if the width is 172, set x="86").
• Move the <text> out of <g> elements with transforms.
• Make it the last child of <svg> to ensure it's not hidden by others.
• Set both <tspan> x="0"

<svg xmlns="http://www.w3.org/2000/svg" width="172" height="239" viewBox="0 0 172 239">
  <g id="Boiler-fit-tag" transform="translate(-1499 -296)">
    <g id="Group_1" data-name="Group 1" transform="translate(1499 296)">
      <g id="Rectangle_28" data-name="Rectangle 28" fill="#fff" stroke="#090808" stroke-width="3">
        <rect width="172" height="239" rx="27" stroke="none"/>
        <rect x="1.5" y="1.5" width="169" height="236" rx="25.5" fill="none"/>
      </g>
      <line id="Line_1" data-name="Line 1" x2="143.142" transform="translate(14.579 143.583)" fill="none" stroke="#707070" stroke-width="2"/>
    </g>
    <!--This line below is meant to be in the centre of the box but is running off the page to the left-->
    <g id="_002-boiler" data-name="002-boiler" transform="translate(1459.535 318.7)">
      <path id="Path_66" data-name="Path 66" d="M220.2,85.447A10.853,10.853,0,1,0,209.344,96.3,10.864,10.864,0,0,0,220.2,85.447Zm-18.868,0a8.015,8.015,0,1,1,8.015,8.014A8.024,8.024,0,0,1,201.329,85.447Z" transform="translate(-83.879 -60.484)"/>
      <path id="Path_67" data-name="Path 67" d="M253.158,112.1a1.42,1.42,0,0,0-2.006-2.006l-2.844,2.844c-1.27,1.27.707,3.306,2.006,2.006Z" transform="translate(-123.941 -88.929)"/>
      <path id="Path_68" data-name="Path 68" d="M155.886,9.51a6.47,6.47,0,0,0-4.62-6.18A93.317,93.317,0,0,0,125.464,0c-3.023,0-6.055.129-9.012.383a1.42,1.42,0,0,0,.243,2.827c2.876-.247,5.827-.372,8.769-.372a90.41,90.41,0,0,1,25,3.215,3.617,3.617,0,0,1,2.58,3.457V56.867H97.88V9.551a3.619,3.619,0,0,1,2.609-3.466c2.139-.613,4.457-1.155,6.889-1.613a1.42,1.42,0,0,0-.525-2.788c-2.518.473-4.922,1.037-7.145,1.674a6.469,6.469,0,0,0-4.665,6.194V71.545a6.47,6.47,0,0,0,4.62,6.18c1.072.314,2.448.682,4.107,1.056v3.458a4.582,4.582,0,0,0,3.288,4.414,52.87,52.87,0,0,0,6.367,1.451v7.328a1.42,1.42,0,0,0,2.837,0V88.517q1.273.158,2.677.28v6.636a1.42,1.42,0,0,0,2.837,0V88.984c1.175.055,2.4.087,3.687.087q1.858,0,3.687-.09v6.451a1.42,1.42,0,0,0,2.837,0V88.786q1.35-.119,2.677-.288v6.935a1.42,1.42,0,0,0,2.837,0V88.074q1.036-.178,2.055-.385a1.42,1.42,0,0,0-.57-2.779,65.153,65.153,0,0,1-31.115-.975,1.761,1.761,0,0,1-1.265-1.7V79.367a101.981,101.981,0,0,0,18.857,1.687,101.214,101.214,0,0,0,18.857-1.735v2.893a1.42,1.42,0,0,0,2.837,0V78.73c1.624-.366,2.988-.725,4.062-1.032a6.469,6.469,0,0,0,4.665-6.194V9.51Zm-5.447,65.459a92.431,92.431,0,0,1-24.975,3.248,90.41,90.41,0,0,1-25-3.215,3.617,3.617,0,0,1-2.58-3.457V59.7h55.168V71.5A3.619,3.619,0,0,1,150.439,74.969Z"/>
      <path id="Path_69" data-name="Path 69" d="M197.862,351.74a1.42,1.42,0,0,0,0,2.837A1.42,1.42,0,0,0,197.862,351.74Z" transform="translate(-82.259 -285.204)"/>
      <path id="Path_70" data-name="Path 70" d="M249.989,351.74a1.42,1.42,0,0,0,0,2.837A1.42,1.42,0,0,0,249.989,351.74Z" transform="translate(-124.525 -285.204)"/>
      <path id="Path_71" data-name="Path 71" d="M302.117,351.74a1.42,1.42,0,0,0,0,2.837A1.42,1.42,0,0,0,302.117,351.74Z" transform="translate(-166.792 -285.204)"/>
    </g>
  </g>
    <text id="Boiler_Fitting" text-anchor="middle" data-name="Boiler Fitting" transform="translate(86, 160)" fill="#e13413" font-size="20" font-family="FranklinGothic-Demi, Franklin Gothic" font-weight="300" letter-spacing="0.039em"><tspan y="18" x="0">BOILER</tspan><tspan y="40" x="0">FITTING</tspan></text>
</svg>

How do you align text with SVG elements?

See the demo below:

.icon,
.text {
  vertical-align: middle;
  display: inline-block;
}

<span class="cardSpan">
  <span class="icon">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"></path></svg>
  </span>
  <span class="text">John Johnson</span>
</span>

<p>
  <span class="cardSpan">
    <span class="icon">
      <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#000000" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
      </svg>
    </span>
    <span class="text">Streetlane 123</span>
  </span>
</p>

<p>
  <span class="cardSpan">
    <span class="icon">
      <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#000000" d="M14,10V4.5L19.5,10M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V9L15,3H5Z" />
      </svg>
    </span>
    <span class="text">These are some cool notes.</span>
  </span>
</p>

Aligning text in SVG

It turns out that you don't need explicit text paths. Firefox 3 has only partial support of the vertical alignment tags (see this thread). It also seems that dominant-baseline only works when applied as a style whereas text-anchor can be part of the style or a tag attribute.

<path d="M10, 20 L17, 20"
      style="fill:none; color:black; stroke:black; stroke-width:1.00"/>
<text fill="black" font-family="sans-serif" font-size="16"
      x="27" y="20" style="dominant-baseline: central;">
  Vertical
</text>

<path d="M60, 40 L60, 47"
      style="fill:none; color:red; stroke:red; stroke-width:1.00"/>
<text fill="red" font-family="sans-serif" font-size="16"
      x="60" y="70" style="text-anchor: middle;">
  Horizontal
</text>

<path d="M60, 90 L60, 97"
      style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/>
<text fill="blue" font-family="sans-serif" font-size="16"
      x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;">
  Bit of Both
</text>

This works in Firefox. Unfortunately Inkscape doesn't seem to handle dominant-baseline (or at least not in the same way).

How to align set of tspan elements by center?

For this I would use JavaScript to calculate the offset for the first tspan as half the difference of length between the two tspan elements

let tspans = document.querySelectorAll("tspan");let offset = (tspans[1].getComputedTextLength() - tspans[0].getComputedTextLength())/2tspans[0].setAttributeNS(null,"dx", -offset)

svg {    border: solid 1px blue;    font-family: monospace;}

<svg viewBox = "0 0 400 100">    <circle r="3" cx="200" cy="50" fill="red">    </circle>
    <text y="50" text-anchor="middle"><!--      --><tspan x="200" >First label</tspan><!--      --><tspan x="200" dy="15">Second long long long label</tspan>   </text></svg>

How to align an svg next to text in react

Pretty sure you're applyling too many display:flex css properties in your components – display:inline-block might be the better approach.

SVG: {
 display: 'flex',
 transform: 'scale(0.1)',
 alignSelf: 'baseline',
 margin: 0
}

should rather be something like this:

SVG{
 display:inline-block;
 height:1em;
 line-height:1em;
 /* just for vertical alignment as svg don't have descenders like fonts */
 vertical-align:-0.2em;
 }

Flex is supposed to be applied to parent elements to distribute child elements within the parent's layout concept. When you apply it to every child node you'll actually forcing visual line breaks (unless you use display: inline-flex ).

.layout{
    width: 50%;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.svg-inline{
    height:1em;
}

.svg-inline svg{
    display:inline-block;
    height:1em;
    line-height:1em;
    /* just for vertical alignment */
    vertical-align:-0.2em;
}

.p-celsius{
    text-align:center;
}

<div class="layout">
    <p class="p-celsius">
    27.87
        <span class="svg-inline">
            <svg class="classNameSVG" viewBox="0 0 191 273" xmlns="http://www.w3.org/2000/svg">
                <path d="M166.8 89C162.8 83.8 157.733 79.8 151.6 77C145.467 74.2 139.133 72.8 132.6 72.8C124.6 72.8 117.333 74.3333 110.8 77.4C104.4 80.3333 98.8667 84.4 94.2 89.6C89.6667 94.8 86.1333 100.933 83.6 108C81.0667 114.933 79.8 122.4 79.8 130.4C79.8 137.867 81 144.933 83.4 151.6C85.8 158.267 89.2667 164.133 93.8 169.2C98.3333 174.267 103.867 178.267 110.4 181.2C116.933 184.133 124.333 185.6 132.6 185.6C140.733 185.6 147.867 183.933 154 180.6C160.133 177.267 165.333 172.6 169.6 166.6L185.8 178.8C184.733 180.267 182.867 182.4 180.2 185.2C177.533 187.867 174 190.6 169.6 193.4C165.2 196.067 159.867 198.4 153.6 200.4C147.467 202.533 140.333 203.6 132.2 203.6C121 203.6 110.867 201.467 101.8 197.2C92.8667 192.933 85.2 187.333 78.8 180.4C72.5333 173.467 67.7333 165.667 64.4 157C61.0667 148.2 59.4 139.333 59.4 130.4C59.4 119.467 61.2 109.4 64.8 100.2C68.4 90.8667 73.4 82.8667 79.8 76.2C86.3333 69.4 94.1333 64.1333 103.2 60.4C112.267 56.6667 122.267 54.8 133.2 54.8C142.533 54.8 151.667 56.6 160.6 60.2C169.667 63.8 177.067 69.3333 182.8 76.8L166.8 89Z" fill="#000" />
                <path d="M24.72 96.02C17.22 96.02 11.58 89.96 11.58 82.28C11.58 74.6 17.22 68.54 24.72 68.54C32.22 68.54 37.86 74.6 37.86 82.28C37.86 89.96 32.22 96.02 24.72 96.02ZM24.72 104.66C37.62 104.66 47.4 94.94 47.4 82.28C47.4 69.62 37.62 59.9 24.72 59.9C11.82 59.9 2.04 69.62 2.04 82.28C2.04 94.94 11.82 104.66 24.72 104.66Z" fill="#000" />
            </svg>
        </span>
    </p>
    
    <p class="p-celsius">
        27.87 °C
    </p>
</div>

---

Related Topics