How to Center Text Inside an Svg Path

How to Center Text inside an SVG Path

You are part of the way there, but you have made a few mistakes.

text-anchor="center" is wrong. It should be text-anchor="middle".

In addition, you should add startOffset="50%" to the <textPath> element to specify that the text should be centred on the half-way point of the path.

Finally you need to fix the path itself. You need to remove the Z path command at the end of the path description. You only want the arc, not the return line back to the start of the arc.

<svg height="500"width="500">   <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z" fill="#ddd" stroke="#ddd"></path>  <defs>    <path id="p1" d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997" fill="#ddd" stroke="#ddd"></path>  </defs>  <text style="font-size: 24px;">    <textPath xlink:href="#p1" startOffset="50%" text-anchor="middle">1test text</textPath>  </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>

Centering text in SVG path

In order to get what you need I've changed the points of the path. Now the path begins at 0,0. Also I've removed all the transforms. If you need your path in a different position you may use transforms on #tooltip as I did in my code.

Please note the attribute dy="35" for the text. This is moving your text upward & in the center.

body {  background: #20262E;  padding: 20px;  font-family: Helvetica;}

<svg id="line-vis" width="640" height="300" viewBox="0 0 640 300" preserveAspectRatio="none" style="cursor: pointer; overflow: visible; position: relative;">   <g id="tooltip" transform="translate(50,10)">      <g class="line" pointer-events="none" >         <!--<path id="tooltip-line-vis" d="M0,60 L54,60 60,66 66,60 120,60 120,0 0,0 0,60"  stroke="#D2DBE9" style="opacity: 1;"></path>-->                <path id="tooltip-line-vis" d="M0,0 L120,0 120,60 66,60 60,66 54,60 0,60 0,0"  stroke="#D2DBE9" style="opacity: 1;"></path>
         <text text-anchor="middle" style="opacity: 1;" fill="gold" dy="35">            <textPath class="yLabelVal" xlink:href="#tooltip-line-vis" startOffset="60" >$5,104.90</textPath>         </text>      </g>      <rect width="640" height="300" fill="none" pointer-events="all"></rect>   </g></svg>

Vertically/Horizontally Center Text inside a SVG Path

I've managed to achieve that by doing something like this:

<svg id="shape">
    <path id = "a" d="M 0 0 L 100 0 L 100 100 L 0 100 Z"></path>
    <text x="50" y="50" text-anchor="middle" alignement-baseline="middle">My Text</text>
</svg>

How do I center text along an SVG curve?

First you need to use startOffset="50%". The startOffset attribute defines an offset from the start of the path for the initial current text position. This will make the text to start in the middle of the path.

Next you need to use text-anchor="middle" to align the text around the starting point which in this case is the middle of the path.

<svg width="100" height="25" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="intermediate" d="M 7 5 C 25 25, 75 25, 93 5" />
  </defs>
  <text fill="#105ca6">
    <textPath startOffset="50%" dominant-baseline="middle" text-anchor="middle" xlink:href="#intermediate">Intermediate</textPath>
  </text>
</svg>

How to place text in the center of an svg path

To place text in a straight line on top of a shape, in the middle of the boundingbox see:

http://jsfiddle.net/dYuAA/114/

It just adds some javascript to place text.

function addText(p)
{
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text");
    var b = p.getBBox();
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")");
    t.textContent = "a";
    t.setAttribute("fill", "red");
    t.setAttribute("font-size", "14");
    p.parentNode.insertBefore(t, p.nextSibling);
}

var paths = document.querySelectorAll("path");
for (var p in paths)
{
    addText(paths[p])
}

The above only looks at path elements, but you could tweak the selector to include whatever you need.

SVG - Center text for each path/shape

Yeah. I ended up just doing it through JavaScript.

document.addEventListener("DOMContentLoaded", function(event) {  var svg = document.getElementById("svg");
  /***** Get the room box and text box *****/  for (i = 1; i < svg.childNodes[1].childNodes.length; i += 2) {    var room = svg.childNodes[1].childNodes[i].childNodes[3]; // path element    var textbox = svg.childNodes[1].childNodes[i].childNodes[1]; // text element
    var new_x = document.createAttribute("x"); // make a new attribute to add to the textbox    new_x.value = room.getBBox().width / 2 + room.getBBox().x - textbox.getBBox().width / 2; // calculate the textbox's new x position    textbox.setAttributeNode(new_x) // assign the textbox the new x value  }
});

body {  box-sizing: border-box;}
.main {  width: 100%;}
svg {  display: block;  margin: 0 auto;  width: 400px;  height: 400px;}
.room {  fill: rgba(220, 220, 220, .4);}
.room:hover {  fill: rgba(0, 255, 255, 0.4);}
.room-text {  fill: black;  font-size: 14px;  font-family: "Helvetica";}

<div id="svg">  <svg viewBox="0 0 181.01 255.02" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-width="1">        <g id="r145">            <text class="room-text" y="40">145</text>            <path class="room" d="m0.13374 1.6456 0.75595 68.792 135.32-2.2679-4.5357-68.036z"/>                        </g>        <g>            <text class="room-text" y="130">146</text>            <path class="room" d="m0.88969 70.437 29.482 103.57 150.43-3.7798-44.601-102.05z"/>        </g>        <g>            <text class="room-text" y="220">147</text>            <path class="room" d="m30.372 174 42.333 79.375 96.762 1.5119 11.339-84.667z"/>        </g>    </svg></div>

---

Related Topics