Текст центра SVG по кругу

Я пытаюсь центрировать текст по кругу с помощью svg.

размер текста будет динамическим.

Thank-х Avi

Мой код:

<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%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I’m centered!Look, I’m centered! </text>
  </g>
</svg>

Ответы

Ответ 1

Просто добавьте text-anchor="middle" в элемент text.

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>

Ответ 2

Может быть, может быть полезно также выравнивание-базовое value = "среднее", с текстом-якорем = "средний":

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

Здесь хороший ресурс: http://apike.ca/prog_svg_text_style.html

Приветствия

Ответ 3

Предлагаемое и принятое решение НЕДОПУСТИМО, если вы хотите нарисовать circle который не центрирован на контейнере!

Использование x="50%" y="50%" в text теге работает только в том случае, если элемент SVG содержит кружок с центром в viewPort.

Если вы хотите нарисовать 3 окружности, вы также должны изменить (x, y) текстовые координаты, чтобы они были равны (cx, cy) координатам окружности, что было сделано в следующем примере

<svg height="350" width="350">
    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

Ответ 4

Более простое решение, которое работает с нецентрированными кругами, - поместить круги и тексты в переведенные группы.

Таким образом, вам не нужно повторять координаты в тексте.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Centered texts</title>
  </head>

  <body ng-controller="MainCtrl">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <g transform="translate(300, 300)" >
        <circle fill="none" stroke="black" stroke-width="1px" r="120"/>
        <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, Im centered!</text>
      </g>
      
      <g transform="translate(150, 150)" >
        <circle fill="none" stroke="black" stroke-width="1px" r="120"/>
        <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, Im also centered!</text>
      </g>
    </svg>
  </body>
</html>

Ответ 5

супер легко сделать текстовый центр в кружке SVG.

<svg height="300" width="300">
      <circle cx="120" cy="120" r="30%" fill="#117da9" />
      <text x="50" y="120" fill="white">Center Text in SVG Circle</text>
</svg>

Все, что вам нужно сделать, это изменить теги <text> значений x и y, пока текст не будет выровнен по центру круга. Например, здесь значения x и y равны x = "50" y = "120"