Svg Center Text in Circle

SVG center text in circle

Add text-anchor="middle" to the text element.

Plunker

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"

viewBox="0 0 500 500">

  <g id="UrTavla">

    <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">

    </circle>

    <text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">Look, I’m centered!Look, I’m centered!</text>

  </g>

</svg>

center text in SVG circle

To make your text span multiple lines, you'll need to make use of <tspan>. To make the text white, you'll need to give it a stroke or fill of #fff. I've gone with fill to make it sharper. As for the text itself, you may find it easier to just use <text>, and do something similar to the following:

<svg width="200" height="100">

  <circle cx="40" cy="40" r="40" fill="#472e12" />

  <text x="50%" y="30%" text-anchor="middle" fill="#fff" dy=".3em">

    <tspan x="20%" dy=".6em">Text In</tspan>

    <tspan x="20%" dy="1.2em">Two Lines</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>

Centered text both vertical and horizontal inside a circle

If you don't want to use tspan, you'll need two text elements. You can set both elements' coordinates to 50%/50%, and then..

• To center horizontally on that point, use text-anchor middle.
• To place the first row just above that point, and the second row just below it, use alignment-baseline baseline/hanging (to get more space between the rows, you'll need to adjust the y coordinates a bit).

Example:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

    <style>

        text {

            font-family: sans-serif;

            font-size: 30px;

        }

    </style>

    <circle cx="50%" cy="50%" r="45%" stroke="tomato" stroke-width="8" stroke-dasharray="20" fill="none" />

    

    <!-- Anchors in action -->

    <text x="50%" y="50%" text-anchor="middle" alignment-baseline="baseline">First row</text>

    <text x="50%" y="50%" text-anchor="middle" alignment-baseline="hanging">Second row</text>

</svg>

Vertically align text inside of the svg circle

Svg center text

Since svg is responsive
I usually put in a hard value that is about the radius of the circle.

So simply by adding:
transform="translate(0, 15)

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {

  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {

    x: centerX + (radius * Math.cos(angleInRadians)),

    y: centerY + (radius * Math.sin(angleInRadians))

  };

}

function describeArc(x, y, radius, startAngle, endAngle) {

  var start = polarToCartesian(x, y, radius, endAngle);

  var end = polarToCartesian(x, y, radius, startAngle);

  var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

  var d = [

    "M", start.x, start.y,

    "A", radius, radius, 0, arcSweep, 0, end.x, end.y

  ].join(" ");

  return d;

}

$('#path').attr("d", describeArc(100, 100, 50, 0, 180));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path id='path' fill="transparent" stroke='red' stroke-width='6' />

  <text x="100" y="100" transform="translate(0, 15)" font-family="Verdana" font-size="50" fill="blue" text-anchor='middle'>5</text>

  <circle cx="100" cy="100" fill="black" r="2" />

  <circle cx="100" cy="50" fill="black" r="2" />

</svg>

Aligning text around center in pie chart using svg circle and text

The issue is that rotation is about the origin, which is the top left of your image. The easiest way around this is to change the viewBox so the origin is in the center of your SVG: viewBox="-16 -16 32 32".

Then you calculate the angle based on the offset and the percentage.

I assume you have some elements like this:

const elements = [
    { percentage: 15, offset: 0, title: 'title', segmentColor: 'red' },
    { percentage: 40, offset: 15, title: 'another title', segmentColor: 'blue' },
    { percentage: 25, offset: 55, title: 'and another', segmentColor: 'green' },
    { percentage: 20, offset: 80, title: 'yet another', segmentColor: 'black' },
];

So something like this would work:

<svg viewBox="-16 -16 32 32">
    {elements.map((element, index) => {
        const angle = (element.offset + element.percentage / 2) * 360 / 100;

        return <g key={index}>
            <circle
                r={15.5}
                style={{
                    fill: 'none',
                    strokeDasharray: `${element.percentage}, 100.53`,
                    strokeDashoffset: -element.offset,
                    stroke: element.segmentColor,
                }}
                textAnchor="middle"
            ></circle>
            <text
                x="10%"
                transform={`rotate(${angle})`}
                fontFamily={'sans-serif'}
                fontSize={'2px'}
                fill="black"
                textAnchor="start"
                alignmentBaseline="middle"
            >
                {element.title}
            </text>
        </g>
    })}
</svg>

Now the x value on the text determined how from the center the text starts.

Align text center below a SVG circle?

One option:

<g transform="translate(300, 300)">
    <circle r="5px"></circle>
    <text baseline-shift="-20px" text-anchor="middle">My Label</text>
</g>

The -20px depends on your font size, and maybe someone has a relative way of doing the drop, but the text-anchor="middle" will center the text.

Center Text in Circle in rotated SVG

Personally I would follow Roberts comment and not use a style. Style transforms and SVGs will head into a world of annoyance :).

<text text-anchor="middle" alignment-baseline="middle" transform="rotate(90,16,16)" fill="#000" x="16" y="16">75%</text>

Use the same center point to rotate around, and also for x,y.

You can also use text-anchor and alignment-baseline to put it in the middle.

As IE doesn't seem to support alignment-baseline="middle", you can adjust the 'y' value of the text element to align as desired, which may be preferable for cross browser support.

plunkr

SVG text-path direction change on a half circle element

The text - Test text direction is located on the curve from the beginning in the path formula pointed to by the M(move) command.
To change the starting point of the text location, you need to swap the beginning and end of the curve.

It was:

d=" M 400 0 A 200 197 0 1 1 400 -7"

It became:

d=" M 0 0 A 200 200 0 0 0 400 0"

<tspan dy="-5" adjusts the text distance from the curve

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
            <textPath   xlink:href="#curve">
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
        </text> 
      </a>
</svg>

---

Related Topics